diff --git a/src-next/cell/demo/index.vue b/src-next/cell/demo/index.vue index d8b0d46ac..f7b47398a 100644 --- a/src-next/cell/demo/index.vue +++ b/src-next/cell/demo/index.vue @@ -2,7 +2,7 @@ - + @@ -108,12 +108,6 @@ export default { verticalCenter: 'Vertical center', }, }, - - methods: { - onClick() { - console.log('click'); - }, - }, }; diff --git a/src-next/empty/Network.js b/src-next/empty/Network.js new file mode 100644 index 000000000..5fd851910 --- /dev/null +++ b/src-next/empty/Network.js @@ -0,0 +1,125 @@ +export default { + render() { + const genStop = (color, offset, opacity) => ( + + ); + + return ( + + + + {genStop('#FFF', 0, 0.5)} + {genStop('#F2F3F5', 100)} + + + {genStop('#F2F3F5', 0, 0.3)} + {genStop('#F2F3F5', 100)} + + + {genStop('#EBEDF0', 0)} + {genStop('#DCDEE0', 100, 0)} + + + {genStop('#EAEDF0', 0)} + {genStop('#DCDEE0', 100)} + + + {genStop('#EAEDF0', 0)} + {genStop('#DCDEE0', 100)} + + + {genStop('#EAEDF0', 0)} + {genStop('#DCDEE0', 100)} + + + {genStop('#EAEDF0', 0)} + {genStop('#DCDEE0', 100)} + + + {genStop('#EBEDF0', 0)} + {genStop('#FFF', 100, 0)} + + + + + + + + + + + + + + + + + + + + + + + + + ); + }, +}; diff --git a/src-next/empty/README.md b/src-next/empty/README.md new file mode 100644 index 000000000..8b13ced49 --- /dev/null +++ b/src-next/empty/README.md @@ -0,0 +1,81 @@ +# Empty + +### Install + +```js +import Vue from 'vue'; +import { Empty } from 'vant'; + +Vue.use(Empty); +``` + +## Usage + +### Basic Usage + +```html + +``` + +### Image Type + +Use the image prop to display different placeholder images + +```html + + + + + + +``` + +### Custom Image + +```html + + + +``` + +### Bottom Content + +```html + + + Button + + + + +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` | +| description | Desciption | _string_ | - | + +### Slots + +| Name | Description | +| ----------- | --------------------- | +| default | Custom bottom content | +| image | Custom image | +| description | Custom description | diff --git a/src-next/empty/README.zh-CN.md b/src-next/empty/README.zh-CN.md new file mode 100644 index 000000000..1b8af0093 --- /dev/null +++ b/src-next/empty/README.zh-CN.md @@ -0,0 +1,90 @@ +# Empty 空状态 + +### 介绍 + +空状态时的占位提示，2.6 版本开始支持此组件 + +### 引入 + +```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/src-next/empty/demo/index.vue b/src-next/empty/demo/index.vue new file mode 100644 index 000000000..3c8d4d49a --- /dev/null +++ b/src-next/empty/demo/index.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src-next/empty/index.js b/src-next/empty/index.js new file mode 100644 index 000000000..a59d4de40 --- /dev/null +++ b/src-next/empty/index.js @@ -0,0 +1,70 @@ +import { createNamespace } from '../utils'; +import Network from './Network'; + +const [createComponent, bem] = createNamespace('empty'); + +const PRESETS = ['error', 'search', 'default']; + +export default createComponent({ + props: { + description: String, + image: { + type: String, + default: 'default', + }, + }, + + methods: { + genImageContent() { + const slots = this.$slots.image?.(); + + if (slots) { + return slots; + } + + if (this.image === 'network') { + return ; + } + + let { image } = this; + + if (PRESETS.indexOf(image) !== -1) { + image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`; + } + + return ; + }, + + genImage() { + return
{this.genImageContent()}
; + }, + + genDescription() { + const description = this.$slots.description + ? this.slot.description() + : this.description; + + if (description) { + return

{description}

; + } + }, + + genBottom() { + const slot = this.$slots.default?.(); + + if (slot) { + return
{slot}
; + } + }, + }, + + render() { + return ( +
+ {this.genImage()} + {this.genDescription()} + {this.genBottom()} +
+ ); + }, +}); diff --git a/src-next/empty/index.less b/src-next/empty/index.less new file mode 100644 index 000000000..2a28d2b86 --- /dev/null +++ b/src-next/empty/index.less @@ -0,0 +1,32 @@ +@import '../style/var'; + +.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/src-next/empty/test/__snapshots__/demo.spec.js.snap b/src-next/empty/test/__snapshots__/demo.spec.js.snap new file mode 100644 index 000000000..a2ae408b9 --- /dev/null +++ b/src-next/empty/test/__snapshots__/demo.spec.js.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders demo correctly 1`] = ` +
+
+
+
+

描述文字

+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+

描述文字

+
+
+ + +
+
+
+
+
+
+

描述文字

+
+
+
+
+
+

描述文字

+
+
+
+
+`; diff --git a/src-next/empty/test/__snapshots__/index.spec.js.snap b/src-next/empty/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..4484b79f0 --- /dev/null +++ b/src-next/empty/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,83 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`bottom slot 1`] = ` +
+
+
Custom bottom
+
+`; + +exports[`description slot 1`] = ` +
+
+

Custom description

+
+`; + +exports[`image slot 1`] = ` +
+
Custom Image
+
+`; + +exports[`render svg when image is network 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; diff --git a/src-next/empty/test/demo.spec.js b/src-next/empty/test/demo.spec.js new file mode 100644 index 000000000..5c70922b5 --- /dev/null +++ b/src-next/empty/test/demo.spec.js @@ -0,0 +1,4 @@ +import Demo from '../demo'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/src-next/empty/test/index.spec.js b/src-next/empty/test/index.spec.js new file mode 100644 index 000000000..54d3d4438 --- /dev/null +++ b/src-next/empty/test/index.spec.js @@ -0,0 +1,42 @@ +import Empty from '..'; +import { mount } from '../../../test'; + +test('image slot', () => { + const wrapper = mount(Empty, { + scopedSlots: { + image: () => 'Custom Image', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('description slot', () => { + const wrapper = mount(Empty, { + scopedSlots: { + description: () => 'Custom description', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('bottom slot', () => { + const wrapper = mount(Empty, { + scopedSlots: { + default: () => 'Custom bottom', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('render svg when image is network', () => { + const wrapper = mount(Empty, { + propsData: { + image: 'network', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/vant.config.js b/vant.config.js index 38c0110ec..26f7e0aaa 100644 --- a/vant.config.js +++ b/vant.config.js @@ -237,10 +237,10 @@ module.exports = { // path: 'divider', // title: 'Divider 分割线', // }, - // { - // path: 'empty', - // title: 'Empty 空状态', - // }, + { + path: 'empty', + title: 'Empty 空状态', + }, // { // path: 'image-preview', // title: 'ImagePreview 图片预览', @@ -571,10 +571,10 @@ module.exports = { // path: 'divider', // title: 'Divider', // }, - // { - // path: 'empty', - // title: 'Empty', - // }, + { + path: 'empty', + title: 'Empty', + }, // { // path: 'image-preview', // title: 'ImagePreview',