vertical.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <el-menu
  3. router
  4. :default-active="state.defaultActive"
  5. background-color="transparent"
  6. :collapse="state.isCollapse"
  7. :unique-opened="getThemeConfig.isUniqueOpened"
  8. :collapse-transition="false"
  9. >
  10. <template v-for="val in menuLists">
  11. <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
  12. <template #title>
  13. <SvgIcon :name="val.meta.icon" />
  14. <span>{{ $t(val.meta.title) }}</span>
  15. </template>
  16. <SubItem :chil="val.children" />
  17. </el-sub-menu>
  18. <template v-else>
  19. <el-menu-item :index="val.path" :key="val.path">
  20. <SvgIcon :name="val.meta.icon" />
  21. <template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
  22. <span>{{ $t(val.meta.title) }}</span>
  23. </template>
  24. <template #title v-else>
  25. <a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
  26. </template>
  27. </el-menu-item>
  28. </template>
  29. </template>
  30. </el-menu>
  31. </template>
  32. <script setup lang="ts" name="navMenuVertical">
  33. import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
  34. import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
  35. import { storeToRefs } from 'pinia';
  36. import { useThemeConfig } from '/@/stores/themeConfig';
  37. import other from '/@/utils/other';
  38. // 引入组件
  39. const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
  40. // 定义父组件传过来的值
  41. const props = defineProps({
  42. // 菜单列表
  43. menuList: {
  44. type: Array<RouteRecordRaw>,
  45. default: () => [],
  46. },
  47. });
  48. // 定义变量内容
  49. const storesThemeConfig = useThemeConfig();
  50. const { themeConfig } = storeToRefs(storesThemeConfig);
  51. const route = useRoute();
  52. const state = reactive({
  53. // 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
  54. defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
  55. isCollapse: false,
  56. });
  57. // 获取父级菜单数据
  58. const menuLists = computed(() => {
  59. return <RouteItems>props.menuList;
  60. });
  61. // 获取布局配置信息
  62. const getThemeConfig = computed(() => {
  63. return themeConfig.value;
  64. });
  65. // 菜单高亮(详情时,父级高亮)
  66. const setParentHighlight = (currentRoute: RouteToFrom) => {
  67. const { path, meta } = currentRoute;
  68. const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
  69. if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
  70. else return path;
  71. };
  72. // 打开外部链接
  73. const onALinkClick = (val: RouteItem) => {
  74. other.handleOpenLink(val);
  75. };
  76. // 页面加载时
  77. onMounted(() => {
  78. state.defaultActive = setParentHighlight(route);
  79. });
  80. // 路由更新时
  81. onBeforeRouteUpdate((to) => {
  82. // 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
  83. state.defaultActive = setParentHighlight(to);
  84. const clientWidth = document.body.clientWidth;
  85. if (clientWidth < 1000) themeConfig.value.isCollapse = false;
  86. });
  87. // 设置菜单的收起/展开
  88. watch(
  89. themeConfig.value,
  90. () => {
  91. document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
  92. },
  93. {
  94. immediate: true,
  95. }
  96. );
  97. </script>