feat(menu): add mixSideTrigger setting

vben

2021-01-01 0419a070413be34ea5455ed955fa51d8c522da86

feat(menu): add mixSideTrigger setting

 CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
## Wip

### ✨ Features

- 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`

## 2.0.0-rc.15 (2020-12-31)

### ✨ 表格破坏性更新

 src/hooks/setting/useMenuSetting.ts

@@ -33,6 +33,8 @@

const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);

const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);

const getCanDrag = computed(() => unref(getMenuSetting).canDrag);

const getAccordion = computed(() => unref(getMenuSetting).accordion);
@@ -145,5 +147,6 @@
    getIsMixMode,
    getIsMixSidebar,
    getCloseMixSidebarOnChange,
    getMixSideTrigger,
  };
}

 src/layouts/default/sider/MixSider.vue

@@ -10,6 +10,7 @@
        open: openMenu,
      },
    ]"
    v-bind="getMenuEvents"
  >
    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
    <ScrollContainer>
@@ -23,7 +24,7 @@
          ]"
          v-for="item in menuModules"
          :key="item.path"
          @click="hanldeModuleClick(item.path)"
          v-bind="getItemEvents(item)"
        >
          <MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
          <g-icon
@@ -112,6 +113,7 @@
        getCanDrag,
        getCloseMixSidebarOnChange,
        getMenuTheme,
        getMixSideTrigger,
      } = useMenuSetting();
      const { title } = useGlobSetting();

@@ -124,6 +126,16 @@
          };
        }
      );

      const getMenuEvents = computed(() => {
        return unref(getMixSideTrigger) === 'hover'
          ? {
              onMouseleave: () => {
                openMenu.value = false;
              },
            }
          : {};
      });

      const getShowDragBar = computed(() => unref(getCanDrag));

@@ -139,11 +151,13 @@
        }
      });

      async function hanldeModuleClick(path: string) {
      async function hanldeModuleClick(path: string, hover = false) {
        const children = await getChildrenMenus(path);

        if (unref(activePath) === path) {
          if (!hover) {
          openMenu.value = !unref(openMenu);
          }
          if (!unref(openMenu)) {
            setActive();
          }
@@ -178,6 +192,17 @@
        setActive();
      }

      function getItemEvents(item: Menu) {
        if (unref(getMixSideTrigger) === 'hover') {
          return {
            onMouseenter: () => hanldeModuleClick(item.path, true),
          };
        }
        return {
          onClick: () => hanldeModuleClick(item.path),
        };
      }

      return {
        t,
        prefixCls,
@@ -194,6 +219,8 @@
        title,
        openMenu,
        getMenuTheme,
        getItemEvents,
        getMenuEvents,
      };
    },
  });

 src/settings/projectSetting.ts

@@ -108,6 +108,8 @@
    accordion: true,
    // Switch page to close menu
    closeMixSidebarOnChange: false,
    // Module opening method ‘click’ |'hover'
    mixSideTrigger: 'hover',
  },

  // Multi-label

 src/types/config.d.ts

@@ -20,6 +20,7 @@
  accordion: boolean;
  closeMixSidebarOnChange: boolean;
  collapsedShowTitle: boolean;
  mixSideTrigger: 'click' | 'hover';
}

export interface MultiTabsSetting {