feat(Cascader): add disabled option (#8952)

src/cascader/Cascader.tsx

@@ -12,6 +12,7 @@ export type CascaderOption = {
   text?: string;
   value?: string | number;
   color?: string;
+  disabled?: boolean;
   children?: CascaderOption[];
   className?: unknown;
   // for custom filed names
@@ -144,6 +145,10 @@ export default defineComponent({
     };
 
     const onSelect = (option: CascaderOption, tabIndex: number) => {
+      if (option.disabled) {
+        return;
+      }
+
       state.tabs[tabIndex].selectedOption = option;
 
       if (state.tabs.length > tabIndex + 1) {
@@ -218,7 +223,13 @@ export default defineComponent({
 
         return (
           <li
-            class={[bem('option', { selected: isSelected }), option.className]}
+            class={[
+              bem('option', {
+                selected: isSelected,
+                disabled: option.disabled,
+              }),
+              option.className,
+            ]}
             style={{ color }}
             onClick={() => onSelect(option, tabIndex)}
           >

src/cascader/README.md

@@ -215,13 +215,14 @@ export default {
 
 ### Data Structure of Option
 
-| Key                | Description              | Type                        |
-| ------------------ | ------------------------ | --------------------------- |
-| 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_ |
+| Key                | Description               | Type                        |
+| ------------------ | ------------------------- | --------------------------- |
+| text               | Option text               | _string_                    |
+| value              | Option value              | _string \| number_          |
+| color `v3.1.0`     | Text color                | _string_                    |
+| children           | Cascade children          | _Option[]_                  |
+| disabled `v3.1.2`  | Whether to disable option | _boolean_                   |
+| className `v3.1.0` | className for the option  | _string \| Array \| object_ |
 
 ### Events
 

src/cascader/README.zh-CN.md

@@ -233,6 +233,7 @@ export default {
 | value              | 选项对应的值（必填）     | _string \| number_          |
 | color `v3.1.0`     | 选项文字颜色             | _string_                    |
 | children           | 子选项列表               | _Option[]_                  |
+| disabled `v3.1.2`  | 是否禁用选项             | _boolean_                   |
 | className `v3.1.0` | 为对应列添加额外的 class | _string \| Array \| object_ |
 
 ### Events
@@ -267,5 +268,6 @@ export default {
 | --van-cascader-tabs-height             | _48px_                    | -    |
 | --van-cascader-active-color            | _var(--van-danger-color)_ | -    |
 | --van-cascader-options-height          | _384px_                   | -    |
+| --van-cascader-option-disabled-color   | _van(--van-gray-5)_       | -    |
 | --van-cascader-tab-color               | _var(--van-text-color)_   | -    |
 | --van-cascader-unselected-tab-color    | _var(--van-gary-6)_       | -    |

src/cascader/index.less

@@ -12,6 +12,7 @@
   --van-cascader-tabs-height: @cascader-tabs-height;
   --van-cascader-active-color: @cascader-active-color;
   --van-cascader-options-height: @cascader-options-height;
+  --van-cascader-option-disabled-color: @cascader-option-disabled-color;
   --van-cascader-tab-color: @cascader-tab-color;
   --van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
 }
@@ -82,6 +83,15 @@
       color: var(--van-cascader-active-color);
       font-weight: var(--van-font-weight-bold);
     }
+
+    &--disabled {
+      color: var(--van-cascader-option-disabled-color);
+      cursor: not-allowed;
+
+      &:active {
+        background-color: transparent;
+      }
+    }
   }
 
   &__selected-icon {

src/cascader/var.less

@@ -11,5 +11,6 @@
 @cascader-tabs-height: 48px;
 @cascader-active-color: var(--van-danger-color);
 @cascader-options-height: 384px;
+@cascader-option-disabled-color: var(--van-gray-5);
 @cascader-tab-color: var(--van-text-color);
 @cascader-unselected-tab-color: var(--van-gray-6);