diff --git a/packages/vant/src/dropdown-item/DropdownItem.tsx b/packages/vant/src/dropdown-item/DropdownItem.tsx
index 895092542..5e7a61a93 100644
--- a/packages/vant/src/dropdown-item/DropdownItem.tsx
+++ b/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 (
-
+
);
}
};
@@ -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}
/>
);
diff --git a/packages/vant/src/dropdown-item/index.less b/packages/vant/src/dropdown-item/index.less
index a9bc7c5a3..117decd13 100644
--- a/packages/vant/src/dropdown-item/index.less
+++ b/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 {
diff --git a/packages/vant/src/dropdown-item/types.ts b/packages/vant/src/dropdown-item/types.ts
index 00856519f..59c7a8b61 100644
--- a/packages/vant/src/dropdown-item/types.ts
+++ b/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;
diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md
index d09a46976..2f55c4ddd 100644
--- a/packages/vant/src/dropdown-menu/README.md
+++ b/packages/vant/src/dropdown-menu/README.md
@@ -249,11 +249,12 @@ dropdownItemRef.value?.toggle();
### Data Structure of Option
-| Key | Description | Type |
-| ----- | ----------- | ----------------------------- |
-| text | Text | _string_ |
-| value | Value | _number \| string \| boolean_ |
-| icon | Left icon | _string_ |
+| Key | Description | Type |
+| -------- | ------------------------- | ----------------------------- |
+| text | Text | _string_ |
+| value | Value | _number \| string \| boolean_ |
+| 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_ | - |
diff --git a/packages/vant/src/dropdown-menu/README.zh-CN.md b/packages/vant/src/dropdown-menu/README.zh-CN.md
index 0a9ed3a7e..c59aa63b1 100644
--- a/packages/vant/src/dropdown-menu/README.zh-CN.md
+++ b/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_ | - |
diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
index e14ba0960..788ebb821 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/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%;
}
diff --git a/packages/vant/src/dropdown-menu/test/index.spec.tsx b/packages/vant/src/dropdown-menu/test/index.spec.tsx
index db365a940..c91b7fef4 100644
--- a/packages/vant/src/dropdown-menu/test/index.spec.tsx
+++ b/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 () => (
+
+
+
+ );
+ },
+ });
+
+ 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);
+});
diff --git a/packages/vant/src/dropdown-menu/types.ts b/packages/vant/src/dropdown-menu/types.ts
index 661cc2714..c5266dc9f 100644
--- a/packages/vant/src/dropdown-menu/types.ts
+++ b/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;
};