From ad6a571fe2a9ff096cf273cf0c7d3e2aa0e323a9 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Wed, 24 Jul 2024 14:38:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(FMenu):=20=E5=A2=9E=E5=8A=A0=20disable?= =?UTF-8?q?d=20=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/menu/interface.ts | 2 ++ components/menu/menu.tsx | 2 +- components/menu/menuItem.tsx | 11 ++++++++++- components/menu/style/index.less | 8 ++++++++ docs/.vitepress/components/menu/common.vue | 4 ++-- docs/.vitepress/components/menu/index.md | 11 ++++++----- docs/.vitepress/components/menu/options.vue | 1 + docs/.vitepress/components/menu/vertical.vue | 2 +- 8 files changed, 31 insertions(+), 10 deletions(-) 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..99d650d8 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 === true, + ); 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 @@ - + From 64329d4b08c1739a211539d16bb07c09042ab602 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Mon, 29 Jul 2024 14:35:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/menu/menuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/menu/menuItem.tsx b/components/menu/menuItem.tsx index 99d650d8..5fd5ee11 100644 --- a/components/menu/menuItem.tsx +++ b/components/menu/menuItem.tsx @@ -65,7 +65,7 @@ export default defineComponent({ () => rootMenu.currentValue.value === props.value, ); const isDisabled = computed( - () => props.disabled === true, + () => props.disabled, ); const menuItem = { uid: instance.uid,