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 className option (#8882)

Browse Source
This commit is contained in:
neverland 2021-06-17 21:11:08 +08:00 committed by GitHub
parent e3341e6c68
commit 5966689ce3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/cascader/Cascader.tsx
View File

@ -12,6 +12,7 @@ export type CascaderOption = {
text?: string; text?: string;
value?: string | number; value?: string | number;
children?: CascaderOption[]; children?: CascaderOption[];
className?: unknown;
// for custom filed names // for custom filed names
[key: string]: any; [key: string]: any;
}; };
@ -56,7 +57,11 @@ export default defineComponent({
activeTab: 0, activeTab: 0,
}); });
const { text: textKey, value: valueKey, children: childrenKey } = extend( const {
text: textKey,
value: valueKey,
children: childrenKey,
} = extend(
{ {
text: 'text', text: 'text',
value: 'value', value: 'value',
@ -210,7 +215,7 @@ export default defineComponent({
return ( return (
<li <li
class={bem('option', { selected: isSelected })} class={[bem('option', { selected: isSelected }), option.className]}
style={{ color: isSelected ? props.activeColor : undefined }} style={{ color: isSelected ? props.activeColor : undefined }}
onClick={() => onSelect(option, tabIndex)} onClick={() => onSelect(option, tabIndex)}
> >

11
src/cascader/README.md
View File

@ -215,11 +215,12 @@ export default {
### Data Structure of Option ### Data Structure of Option
| Key | Description | Type | | Key | Description | Type |
| -------- | ---------------- | ------------------ | | ------------------ | ------------------------ | --------------------------- |
| text | Option text | _string_ | | text | Option text | _string_ |
| value | Option value | _string \| number_ | | value | Option value | _string \| number_ |
| children | Cascade children | _Option[]_ | | children | Cascade children | _Option[]_ |
| className `v3.1.0` | className for the option | _string \| Array \| object_ |
### Events ### Events

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

@ -227,11 +227,12 @@ export default {
`options` 属性是一个由对象构成的数组，数组中的每个对象配置一个可选项，对象可以包含以下值： `options` 属性是一个由对象构成的数组，数组中的每个对象配置一个可选项，对象可以包含以下值：
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| -------- | ------------ | ------------------ | | ------------------ | ------------------------ | --------------------------- |
| text | 选项文字 | _string_ | | text | 选项文字 | _string_ |
| value | 选项对应的值 | _string \| number_ | | value | 选项对应的值 | _string \| number_ |
| children | 子选项列表 | _Option[]_ | | children | 子选项列表 | _Option[]_ |
| className `v3.1.0` | 为对应列添加额外的 class | _string \| Array \| object_ |
### Events ### Events

14
src/cascader/test/index.spec.ts
View File

@ -104,7 +104,7 @@ test('should render title slot correctly', () => {
// expect(lastSelectedOption.html()).toMatchSnapshot(); // expect(lastSelectedOption.html()).toMatchSnapshot();
// }); // });
test('should reset selected options when value is set to emtpy', async () => { test('should reset selected options when value is set to empty', async () => {
const wrapper = mount(Cascader, { const wrapper = mount(Cascader, {
props: { props: {
options, options,
@ -204,3 +204,15 @@ test('should emit click-tab event when a tab is clicked', async () => {
options[0].children[0].text, options[0].children[0].text,
]); ]);
}); });
test('should allow to custom the className of option', async () => {
const wrapper = mount(Cascader, {
props: {
options: [{ value: '1', text: 'foo', className: 'foo' }],
},
});
await later();
const option = wrapper.find('.van-cascader__option');
expect(option.classes()).toContain('foo');
});