升级组件依赖到最新版本

RuoYi

2022-11-17 750a09d5b702f8e857f09ccc124565796f601d3f

 src/components/TopNav/index.vue

@@ -3,6 +3,7 @@
    :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"

@@ -30,21 +31,27 @@
<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'



// 顶部栏初始数

const visibleNumber = ref(null);

// 是否为首次加载

const isFrist = ref(null);

// 当前激活菜单的 index

const currentIndex = ref(null);

// 隐藏侧边栏路由

const hideList = ['/index', '/user/profile'];



const store = useStore();

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const route = useRoute();

const router = useRouter();



// 主题颜色

const theme = computed(() => store.state.settings.theme);

const theme = computed(() => settingsStore.theme);

// 所有的路由信息

const routers = computed(() => store.state.permission.topbarRouters);

const routers = computed(() => permissionStore.topbarRouters);



// 顶部显示菜单

const topMenus = computed(() => {

@@ -69,7 +76,7 @@
    for (let item in router.children) {

      if (router.children[item].parentPath === undefined) {

        if(router.path === "/") {

          router.children[item].path = "/redirect/" + router.children[item].path;

          router.children[item].path = "/" + router.children[item].path;

        } else {

          if(!isHttp(router.children[item].path)) {

            router.children[item].path = router.path + "/" + router.children[item].path;

@@ -86,52 +93,43 @@
// 默认激活的菜单

const activeMenu = computed(() => {

  const path = route.path;

  let activePath = defaultRouter.value;

  if (path !== undefined && path.lastIndexOf("/") > 0) {

  let activePath = path;

  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {

    const tmpPath = path.substring(1, path.length);

    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));

  } else if ("/index" == path || "" == path) {

    if (!isFrist.value) {

      isFrist.value = true;

    } else {

      activePath = "index";

    if (!route.meta.link) {

        appStore.toggleSideBarHide(false);

    }

  } else if(!route.children) {

    activePath = path;

    appStore.toggleSideBarHide(true);

  }

  let routes = activeRoutes(activePath);

  if (routes.length === 0) {

    activePath = currentIndex.value || defaultRouter.value

    activeRoutes(activePath);

  }

  activeRoutes(activePath);

  return activePath;

})

// 默认激活的路由

const defaultRouter = computed(() => {

  let router;

  Object.keys(routers.value).some((key) => {

    if (!routers.value[key].hidden) {

      router = routers.value[key].path;

      return true;

    }

  });

  return router;

})



function setVisibleNumber() {

  const width = document.body.getBoundingClientRect().width / 3;

  visibleNumber.value = parseInt(width / 85);

}



function handleSelect(key, keyPath) {

  currentIndex.value = key;

  const route = routers.value.find(item => item.path === key);

  if (isHttp(key)) {

    // http(s):// 路径新窗口打开

    window.open(key, "_blank");

  } else if (key.indexOf("/redirect") !== -1) {

    // /redirect 路径内部打开

    router.push({ path: key.replace("/redirect", "") });

  } else if (!route || !route.children) {

    // 没有子路由路径内部打开

    router.push({ path: key });

    appStore.toggleSideBarHide(true);

  } else {

    // 显示左侧联动菜单

    activeRoutes(key);

    appStore.toggleSideBarHide(false);

  }

}



function activeRoutes(key) {

  let routes = [];

  if (childrenMenus.value && childrenMenus.value.length > 0) {

@@ -142,7 +140,7 @@
    });

  }

  if(routes.length > 0) {

    store.commit("SET_SIDEBAR_ROUTERS", routes);

    permissionStore.setSidebarRouters(routes);

  }

  return routes;

}

@@ -175,7 +173,7 @@
}



/* sub-menu item */

.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {

.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {

  float: left;

  height: 50px !important;

  line-height: 50px !important;