diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 3cab7518a..9fe0c6473 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -94,11 +94,7 @@ export default defineComponent({ setup(props, { emit, slots }) { const formattedColumns = ref([]); - const { - text: textKey, - values: valuesKey, - children: childrenKey, - } = extend( + const { text: textKey, values: valuesKey, children: childrenKey } = extend( { // compatible with valueKey prop text: props.valueKey, @@ -108,8 +104,9 @@ export default defineComponent({ props.columnsFieldNames ); - const { children, linkChildren } = - useChildren(PICKER_KEY); + const { children, linkChildren } = useChildren( + PICKER_KEY + ); linkChildren(); @@ -322,11 +319,12 @@ export default defineComponent({ const renderToolbar = () => { if (props.showToolbar) { + // default slot is deprecated + // should be removed in next major version + const slot = slots.toolbar || slots.default; return (
- {slots.default - ? slots.default() - : [renderCancel(), renderTitle(), renderConfirm()]} + {slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]}
); } diff --git a/src/picker/README.md b/src/picker/README.md index 9d7c4e0ed..6cd80b116 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -346,15 +346,15 @@ Picker events will pass different parameters according to the columns are single ### Slots -| Name | Description | SlotProps | -| -------------- | ---------------------------- | -------------------------- | -| default | Custom toolbar content | - | -| title | Custom title | - | -| confirm | Custom confirm button text | - | -| cancel | Custom cancel button text | - | -| option | Custom option content | _option: string \| object_ | -| columns-top | Custom content above columns | - | -| columns-bottom | Custom content below columns | - | +| Name | Description | SlotProps | +| --------------- | ---------------------------- | -------------------------- | +| toolbar `3.1.2` | Custom toolbar content | - | +| title | Custom title | - | +| confirm | Custom confirm button text | - | +| cancel | Custom cancel button text | - | +| option | Custom option content | _option: string \| object_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | ### Data Structure of Column diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index daa14c94f..ca7c4a858 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -369,15 +369,15 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| -------------- | ---------------------- | -------------------------- | -| default | 自定义整个顶部栏的内容 | - | -| title | 自定义标题内容 | - | -| confirm | 自定义确认按钮内容 | - | -| cancel | 自定义取消按钮内容 | - | -| option | 自定义选项内容 | _option: string \| object_ | -| columns-top | 自定义选项上方内容 | - | -| columns-bottom | 自定义选项下方内容 | - | +| 名称 | 说明 | 参数 | +| ---------------- | ---------------------- | -------------------------- | +| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm | 自定义确认按钮内容 | - | +| cancel | 自定义取消按钮内容 | - | +| option | 自定义选项内容 | _option: string \| object_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | ### Column 数据结构 diff --git a/src/picker/test/__snapshots__/index.spec.tsx.snap b/src/picker/test/__snapshots__/index.spec.tsx.snap index 04bf32a92..ccda34943 100644 --- a/src/picker/test/__snapshots__/index.spec.tsx.snap +++ b/src/picker/test/__snapshots__/index.spec.tsx.snap @@ -225,41 +225,6 @@ exports[`not allow html 1`] = ` `; -exports[`render confirm/cancel slot 1`] = ` -
-
- - -
-
-
-
    -
-
-
-
-
-
-
-
-`; - exports[`render option slot with object columns 1`] = `
@@ -362,42 +327,6 @@ exports[`render option slot with simple columns 1`] = `
`; -exports[`render title slot 1`] = ` -
-
- - Custom title - -
-
-
-
    -
-
-
-
-
-
-
-
-`; - exports[`set rem item-height 1`] = `
@@ -451,6 +380,103 @@ exports[`set rem item-height 1`] = `
`; +exports[`should render confirm/cancel slot correctly 1`] = ` +
+
+ + +
+
+
+
    +
+
+
+
+
+
+
+
+`; + +exports[`should render title slot correctly 1`] = ` +
+
+ + Custom title + +
+
+
+
    +
+
+
+
+
+
+
+
+`; + +exports[`should render toolbar slot correctly 1`] = ` +
+
+ Custom toolbar +
+
+
+
    +
+
+
+
+
+
+
+
+`; + exports[`toolbar-position prop 1`] = `
{ expect(wrapper.html()).toMatchSnapshot(); }); -test('render title slot', () => { +test('should render title slot correctly', () => { const wrapper = mount(Picker, { slots: { title: () => 'Custom title', @@ -151,7 +151,16 @@ test('render title slot', () => { expect(wrapper.html()).toMatchSnapshot(); }); -test('render confirm/cancel slot', () => { +test('should render toolbar slot correctly', () => { + const wrapper = mount(Picker, { + slots: { + toolbar: () => 'Custom toolbar', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render confirm/cancel slot correctly', () => { const wrapper = mount(Picker, { slots: { confirm: () => 'Custom Confirm',