diff --git a/components/menu/interface.ts b/components/menu/interface.ts index 8730ab63..cf39fa40 100644 --- a/components/menu/interface.ts +++ b/components/menu/interface.ts @@ -6,6 +6,7 @@ export interface MenuOption { icon: () => VNodeChild; children: MenuOption[]; isGroup: boolean; + disabled: boolean; } export interface MenuItemType { @@ -15,4 +16,5 @@ export interface MenuItemType { children: MenuItemType[]; isOpened: Ref; isActive: Ref; + isDisabled: Ref; } diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index bdcb68ba..921934dc 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -152,7 +152,7 @@ export default defineComponent({ isFunction(item.label) ? item.label() : item.label; // 没有子菜单 if (!item.children) { - return ; + return ; } // 分组 if (item.isGroup) { diff --git a/components/menu/menuItem.tsx b/components/menu/menuItem.tsx index b63cb696..5fd5ee11 100644 --- a/components/menu/menuItem.tsx +++ b/components/menu/menuItem.tsx @@ -23,6 +23,7 @@ export const menuItemProps = { required: true, }, label: String, + disabled: Boolean, } as const; export type MenuItemProps = ExtractPublicPropTypes; @@ -38,6 +39,7 @@ export default defineComponent({ required: true, }, label: String, + disabled: Boolean, } satisfies ComponentObjectPropsOptions, setup(props, { slots }) { const instance = getCurrentInstance(); @@ -62,11 +64,15 @@ export default defineComponent({ const isActive = computed( () => rootMenu.currentValue.value === props.value, ); + const isDisabled = computed( + () => props.disabled, + ); const menuItem = { uid: instance.uid, type: 'menu', value: props.value, isActive, + isDisabled, }; onMounted(() => { parentMenu.addChild(menuItem); @@ -75,11 +81,14 @@ export default defineComponent({ parentMenu.removeChild(menuItem); }); const classList = computed(() => - [prefixCls, isActive.value && 'is-active'] + [prefixCls, isActive.value && 'is-active', isDisabled.value && 'is-disabled'] .filter(Boolean) .join(' '), ); const handleClick = () => { + if (isDisabled.value) { + return; + } rootMenu.clickMenuItem(props.value); handleItemClick(); }; diff --git a/components/menu/style/index.less b/components/menu/style/index.less index e1f2107e..d988d726 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -89,6 +89,14 @@ transition: all @animation-duration-base @ease-base-in; } } + &.is-disabled { + &:hover { + cursor: not-allowed; + } + .@{menu-item-prefix-cls}-wrapper { + color: var(--f-text-color-secondary); + } + } } .@{menu-group-prefix-cls} { diff --git a/docs/.vitepress/components/menu/common.vue b/docs/.vitepress/components/menu/common.vue index 66b7c68a..5cc99aad 100644 --- a/docs/.vitepress/components/menu/common.vue +++ b/docs/.vitepress/components/menu/common.vue @@ -7,7 +7,7 @@ - + @@ -33,7 +33,7 @@ - + diff --git a/docs/.vitepress/components/menu/index.md b/docs/.vitepress/components/menu/index.md index accdd978..e38e3a57 100644 --- a/docs/.vitepress/components/menu/index.md +++ b/docs/.vitepress/components/menu/index.md @@ -12,7 +12,6 @@ app.use(FMenu); ## 代码演示 - ### 水平方向 :::demo @@ -124,10 +123,11 @@ customContainer.vue ## MenuItem Props -| 属性 | 说明 | 类型 | 默认值 | -| ----- | ---------- | ------ | ------ | -| value | 唯一标志 | string | `null` | -| label | 菜单的标题 | string | `-` | +| 属性 | 说明 | 类型 | 默认值 | +| -------- | -------------- | ------- | ------- | +| value | 唯一标志 | string | `null` | +| label | 菜单的标题 | string | `-` | +| disabled | 是否禁用菜单项 | boolean | `false` | ## MenuItem Slots @@ -145,3 +145,4 @@ customContainer.vue | icon | 菜单项的图标 | ()=> VNodeChild | | children | 子选项,当存在子选项时渲染为子菜单或者分组菜单 | `Array` | | isGroup | 是否是分组 | boolean | +| disabled | 是否禁用 | boolean | diff --git a/docs/.vitepress/components/menu/options.vue b/docs/.vitepress/components/menu/options.vue index 9b75f0de..c13cc8e1 100644 --- a/docs/.vitepress/components/menu/options.vue +++ b/docs/.vitepress/components/menu/options.vue @@ -91,6 +91,7 @@ export default { { value: '1.3', label: '深圳', + disabled: true, }, { value: '1.4', diff --git a/docs/.vitepress/components/menu/vertical.vue b/docs/.vitepress/components/menu/vertical.vue index 054b533a..0806da01 100644 --- a/docs/.vitepress/components/menu/vertical.vue +++ b/docs/.vitepress/components/menu/vertical.vue @@ -10,7 +10,7 @@ - +