diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx index 87509e634..e63a7df59 100644 --- a/src/cascader/Cascader.tsx +++ b/src/cascader/Cascader.tsx @@ -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 (
  • onSelect(option, tabIndex)} > {option[textKey]} diff --git a/src/cascader/README.md b/src/cascader/README.md index f857f6d92..6deef7301 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -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_ | diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index 5472ba774..d8073082a 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -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_ | diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts index c40f2f0d0..ed3951adf 100644 --- a/src/cascader/test/index.spec.ts +++ b/src/cascader/test/index.spec.ts @@ -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'); +});