feat(Empty): add Empty component (#3327)

* feat(Empty): add Empty component

* fix: 支持传入自定义图片链接

Co-authored-by: shendongfeng <shendongfeng@youzan.com>

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",

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 商品导航',
-      }
+      },
-    ]
+    ],
-  }
+  },
 ];

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,
+    });
+  },
+});

example/pages/empty/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Empty 空状态"
+}

example/pages/empty/index.wxml

@@ -0,0 +1,36 @@
+<demo-block title="基础用法" padding>
+    <van-empty description="描述文字" />
+</demo-block>
+
+<demo-block title="图片类型">
+  <van-tabs
+    active="{{ activeTab }}"
+    bind:change="onChange"
+  >
+    <van-tab title="通用错误">
+      <van-empty image="error" description="描述文字" />
+    </van-tab>
+    <van-tab title="网络错误">
+      <van-empty image="network" description="描述文字" />
+    </van-tab>
+    <van-tab title="搜索提示">
+      <van-empty image="search" description="描述文字" />
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="自定义图片" padding>
+  <van-empty
+    custom-class="custom-image"
+    image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+    description="描述文字"
+  />
+</demo-block>
+
+<demo-block title="底部内容" padding>
+  <van-empty description="描述文字">
+    <van-button round type="danger" custom-class="bottom-button">
+      按钮
+    </van-button>
+  </van-empty>
+</demo-block>

example/pages/empty/index.wxss

@@ -0,0 +1,10 @@
+
+.custom-image .van-empty__image {
+  width: 90px;
+  height: 90px;
+}
+
+.bottom-button {
+  width: 160px;
+  height: 40px;
+}

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
 				}
 			]
 		}

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;

packages/empty/README.md

@@ -0,0 +1,90 @@
+# Empty 空状态
+
+### 介绍
+
+空状态时的占位提示
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Empty } from 'vant';
+
+Vue.use(Empty);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-empty description="描述文字" />
+```
+
+### 图片类型
+
+Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用
+
+```html
+<!-- 通用错误 -->
+<van-empty image="error" description="描述文字" />
+<!-- 网络错误 -->
+<van-empty image="network" description="描述文字" />
+<!-- 搜索提示 -->
+<van-empty image="search" description="描述文字" />
+```
+
+### 自定义图片
+
+需要自定义图片时，可以在 image 属性中传入任意图片 URL
+
+```html
+<van-empty
+  class="custom-image"
+  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+  description="描述文字"
+/>
+
+<style>
+  .custom-image .van-empty__image {
+    width: 90px;
+    height: 90px;
+  }
+</style>
+```
+
+### 底部内容
+
+通过默认插槽可以在 Empty 组件的下方插入内容
+
+```html
+<van-empty description="描述文字">
+  <van-button round type="danger" class="bottom-button">
+    按钮
+  </van-button>
+</van-empty>
+
+<style>
+  .bottom-button {
+    width: 160px;
+    height: 40px;
+  }
+</style>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
+| description | 图片下方的描述文字 | _string_ | - |
+
+### Slots
+
+| 名称        | 说明           |
+| ----------- | -------------- |
+| default     | 自定义底部内容 |
+| image       | 自定义图标     |
+| description | 自定义描述文字 |

packages/empty/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

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;
+  }
+}

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 });
+    }
+  },
+});

packages/empty/index.wxml

@@ -0,0 +1,15 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class=" custom-class van-empty">
+  <view class="van-empty__image">
+    <image wx:if="{{ imageUrl }}"
+      class="van-empty__image__img"
+      src="{{ imageUrl }}" />
+  </view>
+  <p class="van-empty__description">
+    {{ description }}
+  </p>
+  <view class="van-empty__bottom">
+    <slot></slot>
+  </view>
+</view>