blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Picker): expose option index to option slot (#11594)

Browse Source
This commit is contained in:
neverland 2023-02-18 15:54:35 +08:00 committed by GitHub
parent 5b9d870bf8
commit 012d2aa141
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 63 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/vant/src/date-picker/README.md
View File

@ -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

18
packages/vant/src/date-picker/README.zh-CN.md
View File

@ -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 | 自定义选项下方内容 | - |
### 类型定义

6
packages/vant/src/picker/PickerColumn.tsx
View File

@ -235,7 +235,11 @@ export default defineComponent({
return (
<li {...data}>
{slots.option ? slots.option(option) : <div {...childData} />}
{slots.option ? (
slots.option(option, index)
) : (
<div {...childData} />
)}
</li>
);
});

18
packages/vant/src/picker/README.md
View File

@ -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

18
packages/vant/src/picker/README.zh-CN.md
View File

@ -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 数据结构

4
packages/vant/src/picker/test/__snapshots__/slots.spec.ts.snap
View File

@ -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
</li>
<li role="button"
style="height: 44px;"
tabindex="0"
class="van-picker-column__item"
>
Custom 1991
Custom 1991, index: 1
</li>
</ul>
</div>

3
packages/vant/src/picker/test/slots.spec.ts
View File

@ -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}`,
},
});

18
packages/vant/src/time-picker/README.md
View File

@ -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

18
packages/vant/src/time-picker/README.zh-CN.md
View File

@ -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 | 自定义选项下方内容 | - |
### 类型定义