mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Empty): add Empty component (#3327)
* feat(Empty): add Empty component * fix: 支持传入自定义图片链接 Co-authored-by: shendongfeng <shendongfeng@youzan.com>
This commit is contained in:
DFmoon
GitHub
parent
08ab22b6d2
commit
3a60055f8e
@ -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",
|
||||
|
||||
@ -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 商品导航',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
13
example/pages/empty/index.js
Normal file
13
example/pages/empty/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
activeTab: 0,
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
activeTab: event.detail.name,
|
||||
});
|
||||
},
|
||||
});
|
||||
3
example/pages/empty/index.json
Normal file
3
example/pages/empty/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Empty 空状态"
|
||||
}
|
||||
36
example/pages/empty/index.wxml
Normal file
36
example/pages/empty/index.wxml
Normal file
@ -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>
|
||||
10
example/pages/empty/index.wxss
Normal file
10
example/pages/empty/index.wxss
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
.custom-image .van-empty__image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
90
packages/empty/README.md
Normal file
90
packages/empty/README.md
Normal file
@ -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 | 自定义描述文字 |
|
||||
4
packages/empty/index.json
Normal file
4
packages/empty/index.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
33
packages/empty/index.less
Normal file
33
packages/empty/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
22
packages/empty/index.ts
Normal file
22
packages/empty/index.ts
Normal file
@ -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 });
|
||||
}
|
||||
},
|
||||
});
|
||||
15
packages/empty/index.wxml
Normal file
15
packages/empty/index.wxml
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user