导航封装

components.d.ts

@@ -16,8 +16,10 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTag: typeof import('element-plus/es')['ElTag']
     Header: typeof import('./src/components/header.vue')['default']
-    HeaderTop: typeof import('./src/components/headerTop.vue')['default']
+    HeaderNav: typeof import('./src/components/headerCom/headerNav.vue')['default']
+    HeaderTop: typeof import('./src/components/headerCom/headerTop.vue')['default']
     MenuItem: typeof import('./src/components/comNav/sideBar/menuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/comNav/index.vue

@@ -8,7 +8,8 @@
   <script setup lang="ts">
 import {list } from "router/routerData"
 import subMenu from './sideBar/subMenu.vue';
-
+import {comNavStore} from "store/comNav"
+const navStore = comNavStore()
   const routes = useRoute()
   const router = useRouter()
   const menuInfo:any = reactive({
@@ -24,18 +25,20 @@ import subMenu from './sideBar/subMenu.vue';
     isCustomLink:true,
     customLinkCallBack:(ev:any)=>{
       console.log("customLinkCallBack",ev)
-      if(ev.startsWith('staticDefault')){
+      if(ev.title.startsWith('staticDefault')){
         return
       }
       router.push({
-        name:ev
+        name:ev.path
       })
+      navStore.addNavTarget(ev)
     }
   })
 
   onMounted(()=>{
     console.log("routes",router.getRoutes())
     // initRouteList()
+    menuInfo.defaultOpeneds.push()
     
    
   })

src/components/comNav/sideBar/menuItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <template v-for="item in props.menuList" :key="item.path">
+  <template v-for="(item) in props.menuList" :key="item.path">
 
-    <el-sub-menu :index="item.name" v-if="item.children && item.children.length > 0">
+    <el-sub-menu :index="item.name+'&&'+item.meta.title" v-if="item.children && item.children.length > 0">
       <template #title v-if="item.meta.icon">
         <el-icon>
           <Edit />
@@ -11,7 +11,7 @@
       <template #title v-else>{{ item.meta.title }}</template>
       <menuItem :menuList="(item.children as any)" />
     </el-sub-menu>
-    <el-menu-item :index="item.name" v-else >
+    <el-menu-item :index="item.name+'&&'+item.meta.title"  v-else  @click="handleSelectItem(item)">
       <template v-if="item.meta.icon">
         <el-icon >
           <Search/> </el-icon>

src/components/comNav/sideBar/subMenu.vue

@@ -72,7 +72,12 @@ const props: any = defineProps({
 
 const customLinkCallBackFn =(ev:any)=>{
   console.log("2342423",ev)
-  props.customLinkCallBack(ev)
+  const current = ev.split("&&")
+  let currentItem = {
+    title:current[1],
+    path:current[0]
+  }
+  props.customLinkCallBack(currentItem)
 }
  
 </script>

src/components/headerCom/headerNav.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="nav_out">
+        <el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large"   closable :type="tag.type" @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
+            {{ tag.title }}
+        </el-tag>
+    </div>
+</template>
+  
+<script setup lang="ts">
+import {comNavStore} from "store/comNav"
+const router = useRouter()
+const navStore = comNavStore()
+const closeNavTagFn =(index:any)=>{
+    navStore.deleteNavTarget(index)
+}
+const TapNavTagFn=(tag:any)=>{
+    router.push({
+        name:tag.path
+    })
+}
+</script>
+  
+<style scoped lang="scss">
+.nav_out{
+    height: 48px;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
+    display: flex;
+    align-items: center;
+}
+.navItem{
+    margin-right:8px;
+}
+
+</style>

src/components/headerCom/headerTop.vue

@@ -22,11 +22,13 @@
       </div>
     </div>
   </div>
+
 </template>
 <script setup lang="ts">
 
 
 
+
 </script>
   
 <style lang="scss" scoped>

src/main.ts

@@ -1,19 +1,17 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-
+import pinia from "./store"
  
 const app = createApp(App)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
-app.use(createPinia())
 app.use(router)
-
+app.use(pinia)
 app.mount('#app')

src/router/routerData.ts

@@ -1,4 +1,4 @@
-export const list = [
+export const list:any = [
     {
         name: "staticDefault_PathParent",
         path: 'staticDefault_PathParent',

src/store/comNav.ts

@@ -0,0 +1,38 @@
+ 
+export const comNavStore = defineStore('main_com_nav', {
+    state: () => {
+        return {
+            topNavList: [] as any, //loading控制,
+            maxNavCount: 5
+        }
+    },
+    getters: {},
+    actions: {
+        addNavTarget(ev:any) {
+            console.log("topNavList",this.topNavList)
+             if(!this.topNavList.map((ele:any)=>ele.path).includes(ev.path)){
+                this.topNavList.push(ev)
+             }  
+        },
+        deleteNavTarget(index:any) {
+           if(this.topNavList.length>0){
+            this.topNavList.splice(index,1)
+        }
+        },
+        clearTarget(val: any) {
+            this.topNavList=[]
+        }
+    },
+    persist: {
+        enabled: true, // 开启数据缓存
+        strategies: [
+            {
+                // 自定义存储的 key，默认是 store.$id
+                key: 'main_com_nav',
+                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
+                // state 中的字段名，按组打包储存
+                paths: ['topNavList'] //需要缓存的字段 与 state中相关联
+            }
+        ]
+    }
+})

src/store/myInfo.ts

@@ -21,7 +21,7 @@ export const useStore = defineStore('myInfo', {
             {
                 // 自定义存储的 key，默认是 store.$id
                 key: 'userName',
-                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
+                storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
                 // state 中的字段名，按组打包储存
                 paths: ['userName'] //需要缓存的字段 与 state中相关联
             }

src/style/scss/variable.scss

@@ -1,2 +1,5 @@
 $main-color: #3fb9f7;
 $second-color: #666;
+
+
+$headerTopHeight:72px;

src/views/AppMain.vue

@@ -8,19 +8,16 @@
         <comNav></comNav>
       </div>
       <div class="main_content">
-  
+        <headerNav></headerNav>
         <RouterView />
       </div>
     </div>
-
   </div>
-
- 
-
 </template>
 <script setup lang="ts">
 import comNav from 'components/comNav/index.vue';
-import headerTop from 'components/headerTop.vue';
+import headerTop from 'components/headerCom/headerTop.vue';
+import headerNav from "components/headerCom/headerNav.vue"
 </script>
   
 <style scoped lang="scss">
@@ -29,22 +26,37 @@ import headerTop from 'components/headerTop.vue';
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+
   .main_top {
-    height: 72px;
+    height: $headerTopHeight;
   }
+
   .main_ {
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: auto;
+
     .main_nav {
       width: 240px;
     }
-    .main_content{
-      flex: 1;
-      background-color:pink;
-    }
-  }
-}
 
+    .main_content {
+      border-left: 1px solid $second-color;
+      width: 100%;
+      overflow-y: auto;
+      height: calc(100% - var($headerTopHeight) - 48px);
+
+      &::-webkit-scrollbar {
+        width: 2px;
+      }
+      &::-webkit-scrollbar-thumb{
+        height: 6px;
+        width: 2px;
+        background-color: $main-color;
+}
+    }
+  }
+}
 </style>
   

src/views/Index.vue

@@ -1,56 +0,0 @@
-<template>
-    <div>
-        <div
-            class="pathItem"
-            v-for="(item, index) in routeList.list"
-            :key="index"
-            @click="toPage(item)"
-        >
-            {{ item.name }}
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const router = useRouter()
-const routeList = reactive({
-    list: [
-        {
-            name: 'vant-scss演示',
-            path: 'vantTest'
-        },
-        {
-            name: '时间测试',
-            path: 'timeTest'
-        },
-        {
-            name: '全局事件 mitt 演示',
-            path: 'mittTest'
-        },
-        {
-            name: 'pinia演示',
-            path: 'piniaTest'
-        },
-        {
-            name: '路由演示',
-            path: 'piniaTest'
-        }
-    ]
-})
-
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-const toPage = (item: any) => {
-    router.push({ name: item.path })
-}
-</script>
-
-<style scoped lang="scss">
-// @mixin fontStyle($size,$color,$weight,$lineH,$align) {
-// @mixin flexStyle($js,$al,$dir,$wrap){
-.pathItem {
-    @include fontStyle(48px, green, bold, 80px, center);
-    @include wh(750px, 80px);
-
-    margin-bottom: 12px;
-}
-</style>

src/views/configuration/swiperConfig.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="width: 100%;height: 520vh;">
  
     </div>
 </template>

src/views/test/Index.vue

@@ -1,9 +0,0 @@
-<template>
-    <div>
- 
-    </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>

src/views/test/MittTest.vue

@@ -1,33 +0,0 @@
-<template>
-    <button @click="testFn">全局事件测试</button>
-</template>
-
-<script lang="ts" setup>
-import bus from 'utils/bus'
-
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-onMounted(() => {
-    console.log('onMounted')
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const testFn = () => {
-    console.log('测试')
-    bus.emit('sendMsg', '666')
-}
-</script>
-
-<style scoped></style>

src/views/test/PiniaTest.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="test">
-        <h1>测试--</h1>
-        <!-- {{ mainStore.text }} -->
-    </div>
-    <button @click="changeTextFn">修改</button>
-</template>
-
-<script lang="ts" setup>
-// import { useStore } from 'store/main'
-// const mainStore = useStore()
-//  mainStore.text
-const changeTextFn = () => {
-    // mainStore.text="999"
-    // mainStore.$patch((state)=>{
-    //     state.text = "何以皆有，唯有杜康"
-    // })
-    // 或者
-    // mainStore.$patch({
-    //     text: '55555555'
-    // })
-}
-let a = '6666'
-console.log(a)
-</script>
-
-<style scoped lang="scss">
-.test {
-    color: $main-color;
-}
-</style>

src/views/test/RouterTest.vue

@@ -1,32 +0,0 @@
-<template>
-    <h1>路由</h1>
-    <button @click="toPage">路由测试</button>
-</template>
-
-<script lang="ts" setup>
-const router = useRouter()
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-onMounted(() => {
-    console.log('onMounted')
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const toPage = () => {
-    router.push({ name: 'piniaTest' })
-}
-</script>
-
-<style scoped></style>

src/views/test/TimeTest.vue

@@ -1,49 +0,0 @@
-<template>
-    <h1>我是时间测试</h1>
-    <van-button type="primary" @click="toastFn">6666</van-button>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-
-import moment from 'moment'
-import bus from 'utils/bus'
-const { proxy } = getCurrentInstance() as any
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-
-onMounted(() => {
-    bus.on('sendMsg', getMsg)
-    console.log('63666', moment().format('YYYY年MM月DD日'))
-    let currentTime = moment('2019-02-03 12:24:36').format(
-        'YYYY年MM月DD日 HH时mm分ss秒'
-    )
-    console.log('currentTime', currentTime)
-    let diff = moment('2020-08-09').diff(moment('2020-07-08'), 'days')
-    console.log(diff)
-    let firstTime = moment().startOf('month').format('YYYY-MM-DD')
-    console.log('firstTime', firstTime)
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const getMsg = (val: string) => {
-    console.log('val', val)
-}
-const toastFn = () => {
-    proxy.$toast('6666')
-}
-</script>
-
-<style scoped></style>