diff --git a/example/app.json b/example/app.json
index c507c92e..8e43a2ce 100644
--- a/example/app.json
+++ b/example/app.json
@@ -49,6 +49,7 @@
"pages/index-bar/index",
"pages/skeleton/index",
"pages/divider/index",
+ "pages/empty/index",
"pages/calendar/index"
],
"window": {
@@ -72,6 +73,7 @@
"van-count-down": "./dist/count-down/index",
"van-dialog": "./dist/dialog/index",
"van-divider": "./dist/divider/index",
+ "van-empty": "./dist/empty/index",
"van-field": "./dist/field/index",
"van-goods-action": "./dist/goods-action/index",
"van-goods-action-icon": "./dist/goods-action-icon/index",
diff --git a/example/config.js b/example/config.js
index c92b3448..cd571154 100644
--- a/example/config.js
+++ b/example/config.js
@@ -5,33 +5,33 @@ export default [
list: [
{
path: '/button',
- title: 'Button 按钮'
+ title: 'Button 按钮',
},
{
path: '/cell',
- title: 'Cell 单元格'
+ title: 'Cell 单元格',
},
{
path: '/icon',
- title: 'Icon 图标'
+ title: 'Icon 图标',
},
{
path: '/image',
- title: 'Image 图片'
+ title: 'Image 图片',
},
{
path: '/col',
- title: 'Layout 布局'
+ title: 'Layout 布局',
},
{
path: '/popup',
- title: 'Popup 弹出层'
+ title: 'Popup 弹出层',
},
{
path: '/transition',
- title: 'Transition 动画'
- }
- ]
+ title: 'Transition 动画',
+ },
+ ],
},
{
groupName: '表单组件',
@@ -43,49 +43,49 @@ export default [
},
{
path: '/checkbox',
- title: 'Checkbox 复选框'
+ title: 'Checkbox 复选框',
},
{
path: '/datetime-picker',
- title: 'DatetimePicker 时间选择'
+ title: 'DatetimePicker 时间选择',
},
{
path: '/field',
- title: 'Field 输入框'
+ title: 'Field 输入框',
},
{
path: '/picker',
- title: 'Picker 选择器'
+ title: 'Picker 选择器',
},
{
path: '/radio',
- title: 'Radio 单选框'
+ title: 'Radio 单选框',
},
{
path: '/rate',
- title: 'Rate 评分'
+ title: 'Rate 评分',
},
{
path: '/search',
- title: 'Search 搜索'
+ title: 'Search 搜索',
},
{
path: '/slider',
- title: 'Slider 滑块'
+ title: 'Slider 滑块',
},
{
path: '/stepper',
- title: 'Stepper 步进器'
+ title: 'Stepper 步进器',
},
{
path: '/switch',
- title: 'Switch 开关'
+ title: 'Switch 开关',
},
{
path: '/uploader',
- title: 'Uploader 文件上传'
- }
- ]
+ title: 'Uploader 文件上传',
+ },
+ ],
},
{
groupName: '反馈组件',
@@ -93,37 +93,37 @@ export default [
list: [
{
path: '/action-sheet',
- title: 'ActionSheet 上拉菜单'
+ title: 'ActionSheet 上拉菜单',
},
{
path: '/dialog',
- title: 'Dialog 弹出框'
+ title: 'Dialog 弹出框',
},
{
path: '/dropdown-menu',
- title: 'DropdownMenu 下拉菜单'
+ title: 'DropdownMenu 下拉菜单',
},
{
path: '/loading',
- title: 'Loading 加载'
+ title: 'Loading 加载',
},
{
path: '/notify',
- title: 'Notify 消息通知'
+ title: 'Notify 消息通知',
},
{
path: '/overlay',
- title: 'Overlay 遮罩层'
+ title: 'Overlay 遮罩层',
},
{
path: '/swipe-cell',
- title: 'SwipeCell 滑动单元格'
+ title: 'SwipeCell 滑动单元格',
},
{
path: '/toast',
- title: 'Toast 轻提示'
- }
- ]
+ title: 'Toast 轻提示',
+ },
+ ],
},
{
groupName: '展示组件',
@@ -131,53 +131,57 @@ export default [
list: [
{
path: '/circle',
- title: 'Circle 进度条'
+ title: 'Circle 进度条',
},
{
path: '/collapse',
- title: 'Collapse 折叠面板'
+ title: 'Collapse 折叠面板',
},
{
path: '/count-down',
- title: 'CountDown 倒计时'
+ title: 'CountDown 倒计时',
},
{
path: '/divider',
- title: 'Divider 分割线'
+ title: 'Divider 分割线',
+ },
+ {
+ path: '/empty',
+ title: 'Empty 空状态',
},
{
path: '/notice-bar',
- title: 'NoticeBar 通告栏'
+ title: 'NoticeBar 通告栏',
},
{
path: '/panel',
- title: 'Panel 面板'
+ title: 'Panel 面板',
},
{
path: '/progress',
- title: 'Progress 进度条'
+ title: 'Progress 进度条',
},
{
path: '/skeleton',
- title: 'Skeleton 骨架屏'
+ title: 'Skeleton 骨架屏',
},
{
path: '/steps',
- title: 'Steps 步骤条'
+ title: 'Steps 步骤条',
},
{
path: '/sticky',
- title: 'Sticky 粘性布局'
+ title: 'Sticky 粘性布局',
},
{
path: '/tag',
- title: 'Tag 标记'
+ title: 'Tag 标记',
},
{
path: '/tree-select',
- title: 'TreeSelect 分类选择'
- }
- ]
+ title: 'TreeSelect 分类选择',
+ },
+ ],
},
{
groupName: '导航组件',
@@ -185,29 +189,29 @@ export default [
list: [
{
path: '/grid',
- title: 'Grid 宫格'
+ title: 'Grid 宫格',
},
{
path: '/index-bar',
- title: 'IndexBar 索引栏'
+ title: 'IndexBar 索引栏',
},
{
path: '/sidebar',
- title: 'Sidebar 侧边导航'
+ title: 'Sidebar 侧边导航',
},
{
path: '/nav-bar',
- title: 'NavBar 导航栏'
+ title: 'NavBar 导航栏',
},
{
path: '/tab',
- title: 'Tab 标签页'
+ title: 'Tab 标签页',
},
{
path: '/tabbar',
- title: 'Tabbar 标签栏'
- }
- ]
+ title: 'Tabbar 标签栏',
+ },
+ ],
},
{
groupName: '业务组件',
@@ -215,20 +219,20 @@ export default [
list: [
{
path: '/area',
- title: 'Area 省市区选择'
+ title: 'Area 省市区选择',
},
{
path: '/card',
- title: 'Card 商品卡片'
+ title: 'Card 商品卡片',
},
{
path: '/submit-bar',
- title: 'SubmitBar 提交订单栏'
+ title: 'SubmitBar 提交订单栏',
},
{
path: '/goods-action',
- title: 'GoodsAction 商品导航'
- }
- ]
- }
+ title: 'GoodsAction 商品导航',
+ },
+ ],
+ },
];
diff --git a/example/pages/empty/index.js b/example/pages/empty/index.js
new file mode 100644
index 00000000..d0a25c57
--- /dev/null
+++ b/example/pages/empty/index.js
@@ -0,0 +1,13 @@
+import Page from '../../common/page';
+
+Page({
+ data: {
+ activeTab: 0,
+ },
+
+ onChange(event) {
+ this.setData({
+ activeTab: event.detail.name,
+ });
+ },
+});
diff --git a/example/pages/empty/index.json b/example/pages/empty/index.json
new file mode 100644
index 00000000..76a301f4
--- /dev/null
+++ b/example/pages/empty/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "Empty 空状态"
+}
diff --git a/example/pages/empty/index.wxml b/example/pages/empty/index.wxml
new file mode 100644
index 00000000..a661b534
--- /dev/null
+++ b/example/pages/empty/index.wxml
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 按钮
+
+
+
\ No newline at end of file
diff --git a/example/pages/empty/index.wxss b/example/pages/empty/index.wxss
new file mode 100644
index 00000000..da81592c
--- /dev/null
+++ b/example/pages/empty/index.wxss
@@ -0,0 +1,10 @@
+
+.custom-image .van-empty__image {
+ width: 90px;
+ height: 90px;
+}
+
+.bottom-button {
+ width: 160px;
+ height: 40px;
+}
\ No newline at end of file
diff --git a/example/project.config.json b/example/project.config.json
index 5f82a265..e6fd2153 100644
--- a/example/project.config.json
+++ b/example/project.config.json
@@ -6,6 +6,7 @@
"setting": {
"urlCheck": false,
"es6": true,
+ "enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
@@ -15,15 +16,18 @@
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
+ "uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
+ "compileHotReLoad": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
- "useCompilerModule": true,
+ "useIsolateContext": true,
+ "useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
@@ -371,6 +375,12 @@
"name": "index-bar",
"pathName": "pages/index-bar/index",
"scene": null
+ },
+ {
+ "id": -1,
+ "name": "empty",
+ "pathName": "pages/empty/index",
+ "scene": null
}
]
}
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index a909d6ea..03dfe94e 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -546,6 +546,16 @@
@divider-content-left-width: 10%;
@divider-content-right-width: 10%;
+// Empty
+@empty-padding: @padding-xl 0;
+@empty-image-size: 160px;
+@empty-description-margin-top: @padding-md;
+@empty-description-padding: 0 60px;
+@empty-description-color: @gray-6;
+@empty-description-font-size: 14px;
+@empty-description-line-height: 20px;
+@empty-bottom-margin-top: 24px;
+
// TreeSelect
@tree-select-font-size: @font-size-md;
@tree-select-nav-background-color: @background-color;
diff --git a/packages/empty/README.md b/packages/empty/README.md
new file mode 100644
index 00000000..56eb1844
--- /dev/null
+++ b/packages/empty/README.md
@@ -0,0 +1,90 @@
+# Empty 空状态
+
+### 介绍
+
+空状态时的占位提示
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Empty } from 'vant';
+
+Vue.use(Empty);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+
+```
+
+### 图片类型
+
+Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用
+
+```html
+
+
+
+
+
+
+```
+
+### 自定义图片
+
+需要自定义图片时，可以在 image 属性中传入任意图片 URL
+
+```html
+
+
+
+```
+
+### 底部内容
+
+通过默认插槽可以在 Empty 组件的下方插入内容
+
+```html
+
+
+ 按钮
+
+
+
+
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
+| description | 图片下方的描述文字 | _string_ | - |
+
+### Slots
+
+| 名称 | 说明 |
+| ----------- | -------------- |
+| default | 自定义底部内容 |
+| image | 自定义图标 |
+| description | 自定义描述文字 |
diff --git a/packages/empty/index.json b/packages/empty/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/packages/empty/index.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
\ No newline at end of file
diff --git a/packages/empty/index.less b/packages/empty/index.less
new file mode 100644
index 00000000..810b7ee0
--- /dev/null
+++ b/packages/empty/index.less
@@ -0,0 +1,33 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ padding: @empty-padding;
+
+ &__image {
+ width: @empty-image-size;
+ height: @empty-image-size;
+
+ &__img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__description {
+ margin-top: @empty-description-margin-top;
+ padding: @empty-description-padding;
+ color: @empty-description-color;
+ font-size: @empty-description-font-size;
+ line-height: @empty-description-line-height;
+ }
+
+ &__bottom {
+ margin-top: @empty-bottom-margin-top;
+ }
+}
diff --git a/packages/empty/index.ts b/packages/empty/index.ts
new file mode 100644
index 00000000..044faba9
--- /dev/null
+++ b/packages/empty/index.ts
@@ -0,0 +1,22 @@
+import { VantComponent } from '../common/component';
+
+const PRESETS = ['error', 'search', 'default', 'network'];
+
+VantComponent({
+ props: {
+ description: String,
+ image: {
+ type: String,
+ value: 'default',
+ },
+ },
+ created() {
+ if (PRESETS.indexOf(this.data.image) !== -1) {
+ this.setData({
+ imageUrl: `https://img.yzcdn.cn/vant/empty-image-${this.data.image}.png`,
+ });
+ } else {
+ this.setData({ imageUrl: this.data.image });
+ }
+ },
+});
diff --git a/packages/empty/index.wxml b/packages/empty/index.wxml
new file mode 100644
index 00000000..1c284697
--- /dev/null
+++ b/packages/empty/index.wxml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ {{ description }}
+
+
+
+
+
\ No newline at end of file