admin菜单

src/components/admin-frame/home.vue

@@ -5,12 +5,12 @@
       <el-aside width="200px" :style="{ 'background-color': '#242f42' }"><component :is="cAside"></component></el-aside>
       <el-main>
         <div class="content-box" :class="{ 'content-collapse': collapse }">
-          <component :is="cTags"></component>
+          <!-- <component :is="cTags"></component> -->
           <el-col :span="24" class="content">
             <transition name="move" mode="out-in">
               <el-row>
                 <component :is="cBreadcrumb" :breadcrumbTitle="route.meta.title"></component>
-                <el-col :span="24" class="container" style="padding: 15px"><router-view></router-view></el-col>
+                <el-col :span="24" class="container" :style="{ padding: '10px 0' }"><router-view :style="testInfo"></router-view></el-col>
               </el-row>
             </transition>
             <el-backtop target=".content"></el-backtop>
@@ -26,7 +26,7 @@
 import cHeader from './parts/Header.vue'
 import cAside from './parts/Sidebar.vue'
 import cBreadcrumb from './parts/breadcrumb.vue'
-import cTags from './parts/breadcrumb.vue'
+import cTags from './parts/Tags.vue'
 import { useRoute } from 'vue-router'
 import type { Ref } from 'vue'
 import { ref, toRefs } from 'vue'
@@ -35,15 +35,24 @@ import { ref, toRefs } from 'vue'
 const route = useRoute()
 let collapse: Ref<any> = ref(false)
 let tagsList: Ref<any> = ref([])
+const testInfo: Ref<any> = ref({
+  height: '83.8vh',
+  background: '#ffffff',
+  'overflow-x': 'hidden',
+  'overflow-y': 'auto',
+  border: '1px solid #f0f0f0',
+  padding: '10px'
+})
 </script>
 <style scoped lang="scss">
 .main {
   height: 100vh;
+  background-color: #f0f0f0;
   .el-header {
     border-bottom: 1px solid;
   }
   .el-aside {
-    height: 93vh;
+    height: 93.3vh;
     overflow-x: auto;
     overflow-y: auto;
   }

src/components/admin-frame/parts/Tags.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-deprecated-slot-attribute -->
 <template>
   <div id="Tags">
-    <el-row v-if="showTags">
+    <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
           <el-col :span="23" class="left">
@@ -29,106 +29,79 @@
   </div>
 </template>
 
-<script>
-import bus from './bus'
-import { mapState, createNamespacedHelpers } from 'vuex'
-export default {
-  name: 'Tags',
-  props: {},
-  components: {},
-  data: function () {
-    return {
-      tagsList: []
+<script lang="ts" setup>
+// import bus from './parts/bus'
+import type { Ref } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+let tagsList: Ref<any> = ref([])
+const isActive = (path) => {
+  return path === route.fullPath
+}
+// 打开标签
+const handleTags = (command) => {
+  command === 'other' ? closeOther() : closeAll()
+}
+// 关闭单个标签
+const closeTags = (index) => {
+  const delItem = tagsList.value.splice(index, 1)[0]
+  const item = tagsList.value[index] ? tagsList.value[index] : tagsList.value[index - 1]
+  if (item) {
+    delItem.path === route.fullPath && router.push(item.path)
+  } else {
+    router.push('/adminCenter/homeIndex')
+  }
+}
+// 关闭全部标签
+const closeAll = () => {
+  tagsList.value = []
+  router.push('/adminCenter/homeIndex')
+}
+// 关闭其他标签
+const closeOther = () => {
+  const curItem = tagsList.value.filter((item) => {
+    return item.path === route.fullPath
+  })
+  tagsList.value = curItem
+}
+// 设置标签
+const setTags = (route) => {
+  const isExist = tagsList.value.some((item) => {
+    return item.path === route.fullPath
+  })
+  if (!isExist) {
+    if (tagsList.value.length >= 8) {
+      tagsList.value.shift()
     }
-  },
-  created() {
-    this.setTags(this.$route)
-    // 监听关闭当前页面的标签页
-    bus.$on('close_current_tags', () => {
-      for (let i = 0, len = this.tagsList.length; i < len; i++) {
-        const item = this.tagsList[i]
-        if (item.path === this.$route.fullPath) {
-          if (i < len - 1) {
-            this.$router.push(this.tagsList[i + 1].path)
-          } else if (i > 0) {
-            this.$router.push(this.tagsList[i - 1].path)
-          } else {
-            this.$router.push('/')
-          }
-          this.tagsList.splice(i, 1)
-          break
-        }
-      }
+    tagsList.value.push({
+      title: route.meta.title,
+      path: route.fullPath,
+      name: route.matched[1].components.default.name
     })
-  },
-  methods: {
-    isActive(path) {
-      return path === this.$route.fullPath
-    },
-    // 打开标签
-    handleTags(command) {
-      command === 'other' ? this.closeOther() : this.closeAll()
-    },
-    // 关闭单个标签
-    closeTags(index) {
-      const delItem = this.tagsList.splice(index, 1)[0]
-      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]
-      if (item) {
-        delItem.path === this.$route.fullPath && this.$router.push(item.path)
-      } else {
-        this.$router.push('/adminCenter/homeIndex')
-      }
-    },
-    // 关闭全部标签
-    closeAll() {
-      this.tagsList = []
-      this.$router.push('/adminCenter/homeIndex')
-    },
-    // 关闭其他标签
-    closeOther() {
-      const curItem = this.tagsList.filter((item) => {
-        return item.path === this.$route.fullPath
-      })
-      this.tagsList = curItem
-    },
-    // 设置标签
-    setTags(route) {
-      const isExist = this.tagsList.some((item) => {
-        return item.path === route.fullPath
-      })
-      if (!isExist) {
-        if (this.tagsList.length >= 8) {
-          this.tagsList.shift()
-        }
-        this.tagsList.push({
-          title: route.meta.title,
-          path: route.fullPath,
-          name: route.matched[1].components.default.name
-        })
-      }
-      bus.$emit('tags', this.tagsList)
-    }
-  },
-  computed: {
-    ...mapState(['user']),
-    showTags() {
-      return this.tagsList.length > 0
-    }
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title }
-  },
-  watch: {
-    $route(newValue, oldValue) {
-      let index = this.tagsList.findIndex((i) => i.path == oldValue.path)
-      this.tagsList.splice(index, 1)
-      this.setTags(newValue)
-    }
   }
+  bus.$emit('tags', tagsList.value)
 }
+watch(
+  // route(newValue, oldValue) {
+  //     let index = this.tagsList.findIndex(i => i.path == oldValue.path);
+  //     this.tagsList.splice(index, 1);
+  //     this.setTags(newValue);
+  //   },
+  route,
+  (newValue, oldValue) => {
+    let index = tagsList.value.findIndex((i) => i.path == oldValue.path)
+    tagsList.value.splice(index, 1)
+    setTags(newValue)
+  },
+  {
+    deep: true
+  }
+)
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .main {
   .one {
     position: relative;

src/components/admin-frame/parts/bus.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+// 使用 Event Bus
+const bus = new Vue();
+
+export default bus;