mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 18:00:27 +08:00
feat(Picker): expose option index to option slot (#11594)
This commit is contained in:
neverland
GitHub
parent
5b9d870bf8
commit
012d2aa141
@ -194,15 +194,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description | SlotProps |
|
| Name | Description | SlotProps |
|
||||||
| -------------- | ---------------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar | Custom toolbar content | - |
|
| toolbar | Custom toolbar content | - |
|
||||||
| title | Custom title | - |
|
| title | Custom title | - |
|
||||||
| confirm | Custom confirm button text | - |
|
| confirm | Custom confirm button text | - |
|
||||||
| cancel | Custom cancel button text | - |
|
| cancel | Custom cancel button text | - |
|
||||||
| option | Custom option content | _option: PickerOption_ |
|
| option | Custom option content | _option: PickerOption, index: number_ |
|
||||||
| columns-top | Custom content above columns | - |
|
| columns-top | Custom content above columns | - |
|
||||||
| columns-bottom | Custom content below columns | - |
|
| columns-bottom | Custom content below columns | - |
|
||||||
|
|
||||||
### Types
|
### Types
|
||||||
|
|
||||||
|
|||||||
@ -200,15 +200,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| 名称 | 说明 | 参数 |
|
| 名称 | 说明 | 参数 |
|
||||||
| -------------- | ---------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar | 自定义整个顶部栏的内容 | - |
|
| toolbar | 自定义整个顶部栏的内容 | - |
|
||||||
| title | 自定义标题内容 | - |
|
| title | 自定义标题内容 | - |
|
||||||
| confirm | 自定义确认按钮内容 | - |
|
| confirm | 自定义确认按钮内容 | - |
|
||||||
| cancel | 自定义取消按钮内容 | - |
|
| cancel | 自定义取消按钮内容 | - |
|
||||||
| option | 自定义选项内容 | _option: PickerOption_ |
|
| option | 自定义选项内容 | _option: PickerOption, index: number_ |
|
||||||
| columns-top | 自定义选项上方内容 | - |
|
| columns-top | 自定义选项上方内容 | - |
|
||||||
| columns-bottom | 自定义选项下方内容 | - |
|
| columns-bottom | 自定义选项下方内容 | - |
|
||||||
|
|
||||||
### 类型定义
|
### 类型定义
|
||||||
|
|
||||||
|
|||||||
@ -235,7 +235,11 @@ export default defineComponent({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<li {...data}>
|
<li {...data}>
|
||||||
{slots.option ? slots.option(option) : <div {...childData} />}
|
{slots.option ? (
|
||||||
|
slots.option(option, index)
|
||||||
|
) : (
|
||||||
|
<div {...childData} />
|
||||||
|
)}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -362,15 +362,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description | SlotProps |
|
| Name | Description | SlotProps |
|
||||||
| --------------- | ---------------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar `3.1.2` | Custom toolbar content | - |
|
| toolbar `3.1.2` | Custom toolbar content | - |
|
||||||
| title | Custom title | - |
|
| title | Custom title | - |
|
||||||
| confirm | Custom confirm button text | - |
|
| confirm | Custom confirm button text | - |
|
||||||
| cancel | Custom cancel button text | - |
|
| cancel | Custom cancel button text | - |
|
||||||
| option | Custom option content | _option: PickerOption_ |
|
| option | Custom option content | _option: PickerOption, index: number_ |
|
||||||
| columns-top | Custom content above columns | - |
|
| columns-top | Custom content above columns | - |
|
||||||
| columns-bottom | Custom content below columns | - |
|
| columns-bottom | Custom content below columns | - |
|
||||||
|
|
||||||
### Data Structure of PickerOption
|
### Data Structure of PickerOption
|
||||||
|
|
||||||
|
|||||||
@ -383,15 +383,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| 名称 | 说明 | 参数 |
|
| 名称 | 说明 | 参数 |
|
||||||
| ---------------- | ---------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - |
|
| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - |
|
||||||
| title | 自定义标题内容 | - |
|
| title | 自定义标题内容 | - |
|
||||||
| confirm | 自定义确认按钮内容 | - |
|
| confirm | 自定义确认按钮内容 | - |
|
||||||
| cancel | 自定义取消按钮内容 | - |
|
| cancel | 自定义取消按钮内容 | - |
|
||||||
| option | 自定义选项内容 | _option: PickerOption_ |
|
| option | 自定义选项内容 | _option: PickerOption, index: number_ |
|
||||||
| columns-top | 自定义选项上方内容 | - |
|
| columns-top | 自定义选项上方内容 | - |
|
||||||
| columns-bottom | 自定义选项下方内容 | - |
|
| columns-bottom | 自定义选项下方内容 | - |
|
||||||
|
|
||||||
### PickerOption 数据结构
|
### PickerOption 数据结构
|
||||||
|
|
||||||
|
|||||||
@ -82,14 +82,14 @@ exports[`should render option slot correctly 1`] = `
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item van-picker-column__item--selected"
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
>
|
>
|
||||||
Custom 1990
|
Custom 1990, index: 0
|
||||||
</li>
|
</li>
|
||||||
<li role="button"
|
<li role="button"
|
||||||
style="height: 44px;"
|
style="height: 44px;"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="van-picker-column__item"
|
class="van-picker-column__item"
|
||||||
>
|
>
|
||||||
Custom 1991
|
Custom 1991, index: 1
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,7 +42,8 @@ test('should render option slot correctly', () => {
|
|||||||
columns: simpleColumn,
|
columns: simpleColumn,
|
||||||
},
|
},
|
||||||
slots: {
|
slots: {
|
||||||
option: (option: PickerOption) => `Custom ${option.text}`,
|
option: (option: PickerOption, index) =>
|
||||||
|
`Custom ${option.text}, index: ${index}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -195,15 +195,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description | SlotProps |
|
| Name | Description | SlotProps |
|
||||||
| -------------- | ---------------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar | Custom toolbar content | - |
|
| toolbar | Custom toolbar content | - |
|
||||||
| title | Custom title | - |
|
| title | Custom title | - |
|
||||||
| confirm | Custom confirm button text | - |
|
| confirm | Custom confirm button text | - |
|
||||||
| cancel | Custom cancel button text | - |
|
| cancel | Custom cancel button text | - |
|
||||||
| option | Custom option content | _option: PickerOption_ |
|
| option | Custom option content | _option: PickerOption, index: number_ |
|
||||||
| columns-top | Custom content above columns | - |
|
| columns-top | Custom content above columns | - |
|
||||||
| columns-bottom | Custom content below columns | - |
|
| columns-bottom | Custom content below columns | - |
|
||||||
|
|
||||||
### Types
|
### Types
|
||||||
|
|
||||||
|
|||||||
@ -196,15 +196,15 @@ export default {
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| 名称 | 说明 | 参数 |
|
| 名称 | 说明 | 参数 |
|
||||||
| -------------- | ---------------------- | ---------------------- |
|
| --- | --- | --- |
|
||||||
| toolbar | 自定义整个顶部栏的内容 | - |
|
| toolbar | 自定义整个顶部栏的内容 | - |
|
||||||
| title | 自定义标题内容 | - |
|
| title | 自定义标题内容 | - |
|
||||||
| confirm | 自定义确认按钮内容 | - |
|
| confirm | 自定义确认按钮内容 | - |
|
||||||
| cancel | 自定义取消按钮内容 | - |
|
| cancel | 自定义取消按钮内容 | - |
|
||||||
| option | 自定义选项内容 | _option: PickerOption_ |
|
| option | 自定义选项内容 | _option: PickerOption, index: number_ |
|
||||||
| columns-top | 自定义选项上方内容 | - |
|
| columns-top | 自定义选项上方内容 | - |
|
||||||
| columns-bottom | 自定义选项下方内容 | - |
|
| columns-bottom | 自定义选项下方内容 | - |
|
||||||
|
|
||||||
### 类型定义
|
### 类型定义
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user