refactor ts

LiuHao

2023-04-02 251d2411f235e23209d57173857e05b637729ce8

 src/components/TopNav/index.vue

@@ -1,44 +1,15 @@
<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
    :ellipsis="false"
  >
    <template v-for="(item, index) in topMenus">
      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
        ><svg-icon :icon-class="item.meta.icon" />
        {{ item.meta.title }}</el-menu-item
      >
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
      <template #title>更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.path"
          :key="index"
          v-if="index >= visibleNumber"
          ><svg-icon :icon-class="item.meta.icon" />
          {{ item.meta.title }}</el-menu-item
        >
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { constantRoutes } from "@/router"
import { isHttp } from '@/utils/validate'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
<script setup lang="ts">
import { constantRoutes } from '@/router';
import { isHttp } from '@/utils/validate';
import useAppStore from '@/store/modules/app';
import useSettingsStore from '@/store/modules/settings';
import usePermissionStore from '@/store/modules/permission';
import { RouteOption } from 'vue-router';

// 顶部栏初始数
const visibleNumber = ref(null);
const visibleNumber = ref<number>(-1);
// 当前激活菜单的 index
const currentIndex = ref(null);
const currentIndex = ref<string>();
// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile'];

@@ -55,12 +26,12 @@

// 顶部显示菜单
const topMenus = computed(() => {
  let topMenus = [];
  let topMenus:RouteOption[] = [];
  routers.value.map((menu) => {
    if (menu.hidden !== true) {
      // 兼容顶部栏一级菜单内部跳转
      if (menu.path === "/") {
          topMenus.push(menu.children[0]);
          topMenus.push(menu.children? menu.children[0] : menu);
      } else {
          topMenus.push(menu);
      }
@@ -71,21 +42,21 @@

// 设置子路由
const childrenMenus = computed(() => {
  let childrenMenus = [];
  let childrenMenus:RouteOption[] = [];
  routers.value.map((router) => {
    for (let item in router.children) {
      if (router.children[item].parentPath === undefined) {
    router.children?.forEach((item) => {
      if (item.parentPath === undefined) {
        if(router.path === "/") {
          router.children[item].path = "/" + router.children[item].path;
          item.path = "/" + item.path;
        } else {
          if(!isHttp(router.children[item].path)) {
            router.children[item].path = router.path + "/" + router.children[item].path;
          if(!isHttp(item.path)) {
            item.path = router.path + "/" + item.path;
          }
        }
        router.children[item].parentPath = router.path;
        item.parentPath = router.path;
      }
      childrenMenus.push(router.children[item]);
    }
      childrenMenus.push(item);
    })
  })
  return constantRoutes.concat(childrenMenus);
})
@@ -108,12 +79,12 @@
  return activePath;
})

function setVisibleNumber() {
const setVisibleNumber = () => {
  const width = document.body.getBoundingClientRect().width / 3;
  visibleNumber.value = parseInt(width / 85);
  visibleNumber.value = parseInt(String(width / 85));
}

function handleSelect(key, keyPath) {
const handleSelect = (key: string, keyPath: string[]) => {
  currentIndex.value = key;
  const route = routers.value.find(item => item.path === key);
  if (isHttp(key)) {
@@ -121,7 +92,7 @@
    window.open(key, "_blank");
  } else if (!route || !route.children) {
    // 没有子路由路径内部打开
    router.push({ path: key });
    router.push({ path: key, fullPath: '' });
    appStore.toggleSideBarHide(true);
  } else {
    // 显示左侧联动菜单
@@ -130,8 +101,8 @@
  }
}

function activeRoutes(key) {
  let routes = [];
const activeRoutes = (key: string) => {
  let routes:RouteOption[] = [];
  if (childrenMenus.value && childrenMenus.value.length > 0) {
    childrenMenus.value.map((item) => {
      if (key == item.parentPath || (key == "index" && "" == item.path)) {
@@ -159,6 +130,26 @@
})
</script>

<template>
   <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
      <template v-for="(item, index) in topMenus">
         <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
            ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
         >
      </template>

      <!-- 顶部菜单超出数量折叠 -->
      <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
         <template #title>更多菜单</template>
         <template v-for="(item, index) in topMenus">
            <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
               ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
            >
         </template>
      </el-sub-menu>
   </el-menu>
</template>

<style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;