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(Cascader): add option slot (#9111)

Browse Source
This commit is contained in:
neverland 2021-07-24 19:36:10 +08:00 committed by GitHub
parent 09e93eb2ef
commit 2b2cc4add2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/cascader/README.md
View File

@ -192,13 +192,14 @@ export default {
| --- | --- | --- | | --- | --- | --- |
| change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` | | change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` |
| finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` | | finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` |
| close | Emmitted when the close icon is clicked | - | | close | Emitted when the close icon is clicked | - |
### Slots ### Slots
| Name | Description | | Name | Description | SlotProps |
| ----- | ------------ | | --- | --- | --- |
| title | Custom title | | title | Custom title | - |
| option `v2.12.25` | Custom option text | _{ option: Option, selected: boolean }_ |
### Less Variables ### Less Variables

7
src/cascader/README.zh-CN.md
View File

@ -210,9 +210,10 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 | 参数 |
| ----- | -------------- | | ----------------- | -------------- | --------------------------------------- |
| title | 自定义顶部标题 | | title | 自定义顶部标题 | - |
| option `v2.12.25` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
### 样式变量 ### 样式变量

6
src/cascader/index.js
View File

@ -200,6 +200,10 @@ export default createComponent({
selectedOption && selectedOption &&
option[this.valueKey] === selectedOption[this.valueKey]; option[this.valueKey] === selectedOption[this.valueKey];
const Text = this.slots('option', { option, selected: isSelected }) || (
<span>{option[this.textKey]}</span>
);
return ( return (
<li <li
class={bem('option', { selected: isSelected })} class={bem('option', { selected: isSelected })}
@ -208,7 +212,7 @@ export default createComponent({
this.onSelect(option, tabIndex); this.onSelect(option, tabIndex);
}} }}
> >
<span>{option[this.textKey]}</span> {Text}
{isSelected ? ( {isSelected ? (
<Icon name="success" class={bem('selected-icon')} /> <Icon name="success" class={bem('selected-icon')} />
) : null} ) : null}