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 color option (#8883)

Browse Source
This commit is contained in:
neverland 2021-06-18 09:39:00 +08:00 committed by GitHub
parent 5966689ce3
commit 305d73a087
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/cascader/Cascader.tsx
View File

@ -11,6 +11,7 @@ const [name, bem, t] = createNamespace('cascader');
export type CascaderOption = {
text?: string;
value?: string | number;
color?: string;
children?: CascaderOption[];
className?: unknown;
// for custom filed names
@ -212,11 +213,13 @@ export default defineComponent({
const renderOption = (option: CascaderOption) => {
const isSelected =
selectedOption && option[valueKey] === selectedOption[valueKey];
const color =
option.color || (isSelected ? props.activeColor : undefined);
return (
<li
class={[bem('option', { selected: isSelected }), option.className]}
style={{ color: isSelected ? props.activeColor : undefined }}
style={{ color }}
onClick={() => onSelect(option, tabIndex)}
>
<span>{option[textKey]}</span>

1
src/cascader/README.md
View File

@ -219,6 +219,7 @@ export default {
| ------------------ | ------------------------ | --------------------------- |
| text | Option text | _string_ |
| value | Option value | _string \| number_ |
| color `v3.1.0` | Text color | _string_ |
| children | Cascade children | _Option[]_ |
| className `v3.1.0` | className for the option | _string \| Array \| object_ |

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

@ -229,8 +229,9 @@ export default {
| 键名 | 说明 | 类型 |
| ------------------ | ------------------------ | --------------------------- |
| text | 选项文字 | _string_ |
| value | 选项对应的值 | _string \| number_ |
| text | 选项文字（必填） | _string_ |
| value | 选项对应的值（必填） | _string \| number_ |
| color `v3.1.0` | 选项文字颜色 | _string_ |
| children | 子选项列表 | _Option[]_ |
| className `v3.1.0` | 为对应列添加额外的 class | _string \| Array \| object_ |

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

@ -216,3 +216,15 @@ test('should allow to custom the className of option', async () => {
const option = wrapper.find('.van-cascader__option');
expect(option.classes()).toContain('foo');
});
test('should allow to custom the color of option', async () => {
const wrapper = mount(Cascader, {
props: {
options: [{ value: '1', text: 'foo', color: 'red' }],
},
});
await later();
const option = wrapper.find('.van-cascader__option');
expect(option.style.color).toEqual('red');
});