feat(DropdownMenu): add disabled for option (#12785)

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -126,9 +126,14 @@ export default defineComponent({
 
     const renderOption = (option: DropdownItemOption) => {
       const { activeColor } = parent.props;
+      const { disabled } = option;
       const active = option.value === props.modelValue;
 
       const onClick = () => {
+        if (disabled) {
+          return;
+        }
+
         state.showPopup = false;
 
         if (option.value !== props.modelValue) {
@@ -140,7 +145,11 @@ export default defineComponent({
       const renderIcon = () => {
         if (active) {
           return (
-            <Icon class={bem('icon')} color={activeColor} name="success" />
+            <Icon
+              class={bem('icon')}
+              color={disabled ? undefined : activeColor}
+              name="success"
+            />
           );
         }
       };
@@ -152,10 +161,10 @@ export default defineComponent({
           key={String(option.value)}
           icon={option.icon}
           title={option.text}
-          class={bem('option', { active })}
+          class={bem('option', { active, disabled })}
           style={{ color: active ? activeColor : '' }}
           tabindex={active ? 0 : -1}
-          clickable
+          clickable={!disabled}
           onClick={onClick}
         />
       );

packages/vant/src/dropdown-item/index.less

@@ -25,6 +25,14 @@
         color: var(--van-dropdown-menu-option-active-color);
       }
     }
+
+    &--disabled {
+      color: var(--van-dropdown-menu-option-disabled-color);
+
+      .van-dropdown-item__icon {
+        color: var(--van-dropdown-menu-option-disabled-color);
+      }
+    }
   }
 
   &--up {

packages/vant/src/dropdown-item/types.ts

@@ -5,6 +5,7 @@ import type { Numeric } from '../utils';
 export type DropdownItemOptionValue = Numeric | boolean;
 
 export type DropdownItemOption = {
+  disabled?: boolean;
   text: string;
   icon?: string;
   value: DropdownItemOptionValue;

packages/vant/src/dropdown-menu/README.md

@@ -249,11 +249,12 @@ dropdownItemRef.value?.toggle();
 
 ### Data Structure of Option
 
-| Key   | Description | Type                          |
+| Key      | Description               | Type                          |
-| ----- | ----------- | ----------------------------- |
+| -------- | ------------------------- | ----------------------------- |
-| text  | Text        | _string_                      |
+| text     | Text                      | _string_                      |
-| value | Value       | _number \| string \| boolean_ |
+| value    | Value                     | _number \| string \| boolean_ |
-| icon  | Left icon   | _string_                      |
+| disabled | Whether to disable option | _boolean_                     |
+| icon     | Left icon                 | _string_                      |
 
 ## Theming
 
@@ -273,5 +274,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
 | --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
 | --van-dropdown-menu-option-active-color | _var(--van-primary-color)_ | - |
+| --van-dropdown-menu-option-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-dropdown-menu-content-max-height | _80%_ | - |
 | --van-dropdown-item-z-index | _10_ | - |

packages/vant/src/dropdown-menu/README.zh-CN.md

@@ -257,6 +257,7 @@ dropdownItemRef.value?.toggle();
 | --- | --- | --- |
 | text | 文字 | _string_ |
 | value | 标识符 | _number \| string \| boolean_ |
+| disabled | 是否禁用选项 | _boolean_ |
 | icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ |
 
 ## 主题定制
@@ -277,6 +278,7 @@ dropdownItemRef.value?.toggle();
 | --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
 | --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
 | --van-dropdown-menu-option-active-color | _var(--van-primary-color)_ | - |
+| --van-dropdown-menu-option-disabled-color | _var(--van-text-color-3)_ | - |
 | --van-dropdown-menu-content-max-height | _80%_ | - |
 | --van-dropdown-item-z-index | _10_ | - |
 

packages/vant/src/dropdown-menu/index.less

@@ -10,6 +10,7 @@
   --van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
   --van-dropdown-menu-title-line-height: var(--van-line-height-lg);
   --van-dropdown-menu-option-active-color: var(--van-primary-color);
+  --van-dropdown-menu-option-disabled-color: var(--van-text-color-3);
   --van-dropdown-menu-content-max-height: 80%;
 }
 

packages/vant/src/dropdown-menu/test/index.spec.tsx

@@ -367,3 +367,43 @@ test('auto-locate prop', async () => {
 
   vi.doUnmock('../../utils/dom');
 });
+
+test('disable dropdown option', async () => {
+  const onChange = vi.fn();
+  const optionsRef = ref([
+    { text: 'A', value: 0 },
+    { text: 'B', value: 1, disabled: true },
+    { text: 'C', value: 2 },
+  ]);
+  const wrapper = mount({
+    setup() {
+      return () => (
+        <DropdownMenu>
+          <DropdownItem
+            modelValue={0}
+            options={optionsRef.value}
+            onChange={onChange}
+          />
+        </DropdownMenu>
+      );
+    },
+  });
+
+  await later();
+  const title = wrapper.find('.van-dropdown-menu__title');
+  await title.trigger('click');
+
+  const options = wrapper.findAll('.van-dropdown-item .van-cell');
+
+  await options[1].trigger('click');
+  expect(onChange).not.toHaveBeenCalled();
+
+  await options[2].trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(1);
+
+  optionsRef.value[1].disabled = false;
+
+  await later();
+  await options[1].trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(2);
+});

packages/vant/src/dropdown-menu/types.ts

@@ -30,5 +30,6 @@ export type DropdownMenuThemeVars = {
   dropdownMenuTitlePadding?: string;
   dropdownMenuTitleLineHeight?: number | string;
   dropdownMenuOptionActiveColor?: string;
+  dropdownMenuOptionDisabledColor?: string;
   dropdownMenuContentMaxHeight?: string;
 };