feat(FMenu): 增加 disabled 配置项

WeBankFinTech · Jul 24, 2024 · ad6a571 · ad6a571
1 parent b76461b
commit ad6a571
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 10 deletions.
diff --git 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<boolean>;
     isActive: Ref<boolean>;
+    isDisabled: Ref<boolean>;
 }
diff --git 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 <MenuItem value={item.value} v-slots={itemSlots} />;
+                    return <MenuItem value={item.value} disabled={item.disabled} v-slots={itemSlots} />;
                 }
                 // 分组
                 if (item.isGroup) {

diff --git 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<typeof menuItemProps>;
@@ -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
@@ -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
@@ -7,7 +7,7 @@
             <template #label>我是标题</template>
             <f-menu-group>
                 <template #label>华中地区</template>
-                <f-menu-item value="1.1">
+                <f-menu-item value="1.1" disabled>
                     <template #label>湖南</template>
                 </f-menu-item>
                 <f-sub-menu label="湖北">
@@ -33,7 +33,7 @@
                 <AppstoreOutlined />
             </template>
             <template #label>人群管理</template>
-            <f-menu-item value="2.1">
+            <f-menu-item value="2.1" :disabled="true">
                 <template #label>富高帅</template>
             </f-menu-item>
             <f-menu-item value="2.2">

diff --git 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<MenuOption>`       |
 | isGroup  | 是否是分组                                     | boolean                   |
+| disabled | 是否禁用                                       | boolean                   |
diff --git 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
@@ -10,7 +10,7 @@
                 </template>
                 <f-menu-group>
                     <template #label>华中地区</template>
-                    <f-menu-item value="1.1">
+                    <f-menu-item value="1.1" disabled>
                         <template #label>湖南</template>
                     </f-menu-item>
                     <f-sub-menu label="湖北">