feat(Cascader): add color option (#8883)

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 (
           <li
             class={[bem('option', { selected: isSelected }), option.className]}
-            style={{ color: isSelected ? props.activeColor : undefined }}
+            style={{ color }}
             onClick={() => onSelect(option, tabIndex)}
           >
             <span>{option[textKey]}</span>

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_ |
 

src/cascader/README.zh-CN.md

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

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');
+});