From b41f8cd14c8cce16de741ba781c5be2ad789230b Mon Sep 17 00:00:00 2001 From: inottn Date: Sun, 24 Nov 2024 19:49:58 +0800 Subject: [PATCH] feat(Picker): add empty slot (#13219) --- packages/vant/src/picker/Picker.tsx | 5 +++ packages/vant/src/picker/README.md | 19 +++++++++- packages/vant/src/picker/README.zh-CN.md | 19 +++++++++- packages/vant/src/picker/demo/index.vue | 15 ++++++++ .../test/__snapshots__/demo-ssr.spec.ts.snap | 35 +++++++++++++++++++ .../test/__snapshots__/demo.spec.ts.snap | 32 +++++++++++++++++ packages/vant/src/picker/test/index.spec.tsx | 20 +++++++++++ 7 files changed, 143 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 6332ba146..001cd763d 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -241,6 +241,11 @@ export default defineComponent({ const renderColumns = () => { const wrapHeight = optionHeight.value * +props.visibleOptionNum; const columnsStyle = { height: `${wrapHeight}px` }; + + if (!props.loading && !hasOptions.value && slots.empty) { + return slots.empty(); + } + return (
{renderColumnItems()} diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index c9b18a0fa..941d913eb 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -276,11 +276,27 @@ export default { }; ``` +### Empty content + +When the data is empty, you can use the `empty` slot to customize the empty content. + +```html + + + +``` + ### Custom Columns Field ```html @@ -374,6 +390,7 @@ export default { | option | Custom option content | _option: PickerOption, index: number_ | | columns-top | Custom content above columns | - | | columns-bottom | Custom content below columns | - | +| empty `v4.9.10` | Custom empty content | - | ### Data Structure of PickerOption diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index 065ce9de5..20e513928 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -297,11 +297,27 @@ export default { }; ``` +### 空状态 + +当数据为空时，可以使用 `empty` 插槽自定义空状态内容。 + +```html + + + +``` + ### 自定义 Columns 的结构 ```html @@ -395,6 +411,7 @@ export default { | option | 自定义选项内容 | _option: PickerOption, index: number_ | | columns-top | 自定义选项上方内容 | - | | columns-bottom | 自定义选项下方内容 | - | +| empty `v4.9.10` | 自定义空状态内容 | - | ### PickerOption 数据结构 diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index c6353ceb9..b53286665 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -12,6 +12,7 @@ import { disabledColumns, customKeyColumns, } from './data'; +import VanEmpty from '../../empty'; import { showToast } from '../../toast'; import { useTranslate } from '../../../docs/site'; @@ -29,6 +30,7 @@ const t = useTranslate({ multipleColumns: '多列选择', customChildrenKey: '自定义 Columns 结构', customChildrenColumns: customKeyColumns['zh-CN'], + emptyDescription: '暂无数据', toastContent: (value: string) => `当前值：${value}`, }, 'en-US': { @@ -44,6 +46,7 @@ const t = useTranslate({ multipleColumns: 'Multiple Columns', customChildrenKey: 'Custom Columns Fields', customChildrenColumns: customKeyColumns['en-US'], + emptyDescription: 'No data', toastContent: (value: string) => `Value: ${value}`, }, }); @@ -109,6 +112,18 @@ const onCancel = () => showToast(t('cancel')); + + + + + +
+
+ +
+
+ + +
+ Title +
+ +
+ +
+
+ +
+

+ No data +

+
+
+
diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap index 5fabbe5c3..ef20ffa4b 100644 --- a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap @@ -608,6 +608,38 @@ exports[`should render demo and match snapshot 1`] = `
+
+
+
+ +
+ Title +
+ +
+
+
+ +
+

+ No data +

+
+
+
diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 13f55dba1..17ecdab92 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -420,3 +420,23 @@ test('should allow to skip rendering confirm and cancel buttons', async () => { expect(wrapper.find('.van-picker__confirm').exists()).toBeFalsy(); expect(wrapper.find('.van-picker__cancel').exists()).toBeFalsy(); }); + +test('should render empty slot when options is empty', async () => { + const wrapper = mount(Picker, { + props: { + loading: true, + columns: [[], []], + }, + slots: { + empty: () =>
empty content
, + }, + }); + + expect(wrapper.html()).not.toContain('empty content'); + + await wrapper.setProps({ loading: false }); + expect(wrapper.html()).toContain('empty content'); + + await wrapper.setProps({ columns: [{ values: ['foo'] }] }); + expect(wrapper.html()).not.toContain('empty content'); +});