From 012d2aa1410da42386c676e6839e1aba3442e005 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 18 Feb 2023 15:54:35 +0800 Subject: [PATCH] feat(Picker): expose option index to option slot (#11594) --- packages/vant/src/date-picker/README.md | 18 +++++++++--------- packages/vant/src/date-picker/README.zh-CN.md | 18 +++++++++--------- packages/vant/src/picker/PickerColumn.tsx | 6 +++++- packages/vant/src/picker/README.md | 18 +++++++++--------- packages/vant/src/picker/README.zh-CN.md | 18 +++++++++--------- .../test/__snapshots__/slots.spec.ts.snap | 4 ++-- packages/vant/src/picker/test/slots.spec.ts | 3 ++- packages/vant/src/time-picker/README.md | 18 +++++++++--------- packages/vant/src/time-picker/README.zh-CN.md | 18 +++++++++--------- 9 files changed, 63 insertions(+), 58 deletions(-) diff --git a/packages/vant/src/date-picker/README.md b/packages/vant/src/date-picker/README.md index 30ed4acd4..f3a2fe272 100644 --- a/packages/vant/src/date-picker/README.md +++ b/packages/vant/src/date-picker/README.md @@ -194,15 +194,15 @@ export default { ### Slots -| Name | Description | SlotProps | -| -------------- | ---------------------------- | ---------------------- | -| toolbar | Custom toolbar content | - | -| title | Custom title | - | -| confirm | Custom confirm button text | - | -| cancel | Custom cancel button text | - | -| option | Custom option content | _option: PickerOption_ | -| columns-top | Custom content above columns | - | -| columns-bottom | Custom content below columns | - | +| Name | Description | SlotProps | +| --- | --- | --- | +| toolbar | Custom toolbar content | - | +| title | Custom title | - | +| confirm | Custom confirm button text | - | +| cancel | Custom cancel button text | - | +| option | Custom option content | _option: PickerOption, index: number_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | ### Types diff --git a/packages/vant/src/date-picker/README.zh-CN.md b/packages/vant/src/date-picker/README.zh-CN.md index 71edcc5e7..6c49e62b0 100644 --- a/packages/vant/src/date-picker/README.zh-CN.md +++ b/packages/vant/src/date-picker/README.zh-CN.md @@ -200,15 +200,15 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| -------------- | ---------------------- | ---------------------- | -| toolbar | 自定义整个顶部栏的内容 | - | -| title | 自定义标题内容 | - | -| confirm | 自定义确认按钮内容 | - | -| cancel | 自定义取消按钮内容 | - | -| option | 自定义选项内容 | _option: PickerOption_ | -| columns-top | 自定义选项上方内容 | - | -| columns-bottom | 自定义选项下方内容 | - | +| 名称 | 说明 | 参数 | +| --- | --- | --- | +| toolbar | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm | 自定义确认按钮内容 | - | +| cancel | 自定义取消按钮内容 | - | +| option | 自定义选项内容 | _option: PickerOption, index: number_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | ### 类型定义 diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 7e5fa5d14..4e22df702 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -235,7 +235,11 @@ export default defineComponent({ return (
  • - {slots.option ? slots.option(option) :
    } + {slots.option ? ( + slots.option(option, index) + ) : ( +
    + )}
    • ); }); diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index a73525998..cec62bfab 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -362,15 +362,15 @@ export default { ### Slots -| 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: PickerOption_ | -| 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: PickerOption, index: number_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | ### 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 50befa5d0..fcab5606c 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -383,15 +383,15 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| ---------------- | ---------------------- | ---------------------- | -| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - | -| title | 自定义标题内容 | - | -| confirm | 自定义确认按钮内容 | - | -| cancel | 自定义取消按钮内容 | - | -| option | 自定义选项内容 | _option: PickerOption_ | -| columns-top | 自定义选项上方内容 | - | -| columns-bottom | 自定义选项下方内容 | - | +| 名称 | 说明 | 参数 | +| --- | --- | --- | +| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm | 自定义确认按钮内容 | - | +| cancel | 自定义取消按钮内容 | - | +| option | 自定义选项内容 | _option: PickerOption, index: number_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | ### PickerOption 数据结构 diff --git a/packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap index 7c41c602e..0ca586209 100644 --- a/packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap +++ b/packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap @@ -82,14 +82,14 @@ exports[`should render option slot correctly 1`] = ` tabindex="0" class="van-picker-column__item van-picker-column__item--selected" > - Custom 1990 + Custom 1990, index: 0
  • - Custom 1991 + Custom 1991, index: 1
    • diff --git a/packages/vant/src/picker/test/slots.spec.ts b/packages/vant/src/picker/test/slots.spec.ts index 0479bece2..25a70ce84 100644 --- a/packages/vant/src/picker/test/slots.spec.ts +++ b/packages/vant/src/picker/test/slots.spec.ts @@ -42,7 +42,8 @@ test('should render option slot correctly', () => { columns: simpleColumn, }, slots: { - option: (option: PickerOption) => `Custom ${option.text}`, + option: (option: PickerOption, index) => + `Custom ${option.text}, index: ${index}`, }, }); diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md index df729cd59..fe7791ff8 100644 --- a/packages/vant/src/time-picker/README.md +++ b/packages/vant/src/time-picker/README.md @@ -195,15 +195,15 @@ export default { ### Slots -| Name | Description | SlotProps | -| -------------- | ---------------------------- | ---------------------- | -| toolbar | Custom toolbar content | - | -| title | Custom title | - | -| confirm | Custom confirm button text | - | -| cancel | Custom cancel button text | - | -| option | Custom option content | _option: PickerOption_ | -| columns-top | Custom content above columns | - | -| columns-bottom | Custom content below columns | - | +| Name | Description | SlotProps | +| --- | --- | --- | +| toolbar | Custom toolbar content | - | +| title | Custom title | - | +| confirm | Custom confirm button text | - | +| cancel | Custom cancel button text | - | +| option | Custom option content | _option: PickerOption, index: number_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | ### Types diff --git a/packages/vant/src/time-picker/README.zh-CN.md b/packages/vant/src/time-picker/README.zh-CN.md index 79ca930f9..b3e1745a9 100644 --- a/packages/vant/src/time-picker/README.zh-CN.md +++ b/packages/vant/src/time-picker/README.zh-CN.md @@ -196,15 +196,15 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| -------------- | ---------------------- | ---------------------- | -| toolbar | 自定义整个顶部栏的内容 | - | -| title | 自定义标题内容 | - | -| confirm | 自定义确认按钮内容 | - | -| cancel | 自定义取消按钮内容 | - | -| option | 自定义选项内容 | _option: PickerOption_ | -| columns-top | 自定义选项上方内容 | - | -| columns-bottom | 自定义选项下方内容 | - | +| 名称 | 说明 | 参数 | +| --- | --- | --- | +| toolbar | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm | 自定义确认按钮内容 | - | +| cancel | 自定义取消按钮内容 | - | +| option | 自定义选项内容 | _option: PickerOption, index: number_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | ### 类型定义