From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/components/TopNav/index.vue | 101 +++++++++++++++++++++++---------------------------
1 files changed, 46 insertions(+), 55 deletions(-)
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index ac1d2e5..ea16377 100644
--- a/src/components/TopNav/index.vue
+++ b/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;
--
Gitblit v1.9.3