devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

以element ui 的标签页与侧边导航联动的vue功能_element ui 标签页 导航栏 联动

作者：不正经 | 2024-05-03 16:23:59

赞

踩

element ui 标签页 导航栏 联动

侧栏与标签页的联动效果在后台管理中很常用,这个是以element ui为基础写的标签页与侧边导航联动的项目部分。

在整体布局layout页面中，测栏,其中最重要的两个参数default-active设为$router.path,则它会根据路由来激活样式，index设为遍历数组的url,跟路由地址一一匹配。

思路是遍历导航栏数组，在数组中有标题，图标，路由地址等信息，与路由信息相对应，点击每个导航项目时会将该条数组项目添加到store里，删除则反之。这主要是一级路由的列表，那么其他页面的标签我是通过监听路由，在里面包不包含，不包含就从当前的路由元信息里取。

layout.vue文件

  1. <template>
  2.     <div class="layoutContent">
  3.         <el-menu :default-active="$route.path" :router="true" active-text-color="#409eff" class="el-menu-vertical-demo"
  4.             :class="{ showMenu: isCollapse }" mode="vertical">
  5.             <!-- 因为要一直开着首页标签，所以我写死了 -->
  6.             <el-menu-item @click="$router.push({ path: '/' })" index="/">
  7.                 <i class="el-icon-menu"></i>
  8.                 <span slot="title">首页</span>
  9.             </el-menu-item>
  10.             <el-menu-item v-for="(item, index) in list1" :key="item.title" :index="item.url"
  11.                 @select="menuSelect(index, indexPath)" @click="mainToPath(item)">
  12.                 <i :class="`el-icon-${item.icon}`"></i>
  13.                 <span slot="title">{{ item.title }}</span>
  14.             </el-menu-item>
  15.         </el-menu>
  16.         <div class="layout">
  17.             <div class="navbar">
  18.                 <i class="el-icon-s-unfold" @click="unfold"></i>
  19.                 <div class="user">
  20.                     <i class="el-icon-refresh" style="font-size: 20px" @click="refresh()"></i>
  21.                     <el-image style="width: 30px; height: 30px; border-radius: 50%"
  22.                         src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
  23.  
  24.                     <el-row class="block-col-2">
  25.                         <el-col :span="12">
  26.                             <el-dropdown trigger="click">
  27.                                 <span class="el-dropdown-link">
  28.                                     <i class="el-icon-arrow-down" style="font-size: 16px; margin-left: 10px"></i>
  29.                                 </span>
  30.                                 <el-dropdown-menu slot="dropdown">
  31.                                     <el-dropdown-item v-for="(item, index) in list2" :icon="`el-icon-${item.icon}`"
  32.                                         @click.native="setting(index)" :key="item.title">{{ item.title
  33.                                         }}</el-dropdown-item>
  34.                                 </el-dropdown-menu>
  35.                             </el-dropdown>
  36.                         </el-col>
  37.                     </el-row>
  38.                 </div>
  39.             </div>
  40.             <Head-Tag></Head-Tag>
  41.             <el-dialog title="提示" :visible.sync="dialogVisible" width="90%">
  42.                 <span>确认退出吗</span>
  43.                 <span slot="footer" class="dialog-footer">
  44.                     <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
  45.                     <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
  46.                 </span>
  47.             </el-dialog>
  48.             <router-view v-if="isRresh"></router-view>
  49.         </div>
  50.     </div>
  51. </template>
  52. <script>
  53.     import { mapState, mapMutations } from "vuex";
  54.     //tag组件
  55.     import HeadTag from "@/components/headTag.vue";
  56.     export default {
  57.         components: {
  58.             HeadTag,
  59.         },
  60.         data() {
  61.             return {
  62.                 isCollapse: false,
  63.                 isRresh: true,
  64.                 dialogVisible: false,
  65.                 index: "",
  66.                 list1: [
  67.                     { title: "", icon: "menu", url: "/***" },
  68.                     { title: "", icon: "document", url: "/***" },
  69.                     { title: "", icon: "setting", url: "" },
  70.                 ],
  71.             };
  72.         },
  73.  
  74.         watch: {
  75.             ["$route.path"]: function (newVal, olderVal) {
  76.                 if (newVal === "/") return;
  77.                 if (newVal === "/editUser")
  78.                     this.$route.meta.title = JSON.parse(
  79.                         window.sessionStorage.getItem("title")
  80.                     ).title;
  81.                 for (let j = 0; j < this.list1.length; j++) {
  82.                     // 若上面列表里没有包含当前的路由信息，则从当前路由元信息里取
  83.                     if (newVal && !this.list1[j].url.includes(newVal)) {
  84.                         this.$store.commit("mutationSelectTags", this.$route.meta);
  85.                     }
  86.                 }
  87.             },
  88.             ["$store.state.stateTagsList"]: function (newVal, olderVal) {
  89.                 // 若tag中的数据条为0,就跳转到首页
  90.                 if (newVal.length === 0) {
  91.                     this.$router.push({ path: "/" }).catch((err) => { });
  92.                 }
  93.             },
  94.         },
  95.  
  96.         methods: {
  97.             mainToPath(value) {
  98.                 // 一级主跳转并选择tag
  99.                 this.$store.commit("mutationSelectTags", value);
  100.                 this.$router.push({ path: value.url }).catch((err) => { });
  101.             },
  102.             unfold() {
  103.                 // 侧栏开关
  104.                 this.isCollapse = !this.isCollapse;
  105.             },
  106.             ...mapState({ state: "state" }),
  107.             ...mapMutations({
  108.                 closeAll: "mutationCloseAllTag",
  109.             }),
  110.             setting(index) {
  111.                 //设置小功能，可有可无
  112.                 if (index === 0) {
  113.                     // 关闭全部tag
  114.                     this.closeAll();
  115.                 }
  116.                 if (index === 1) {
  117.                     if (this.$router.history.current.path === "/") {
  118.                         this.$message("您已在首页了！");
  119.                         return;
  120.                     }
  121.                     this.$router.push({ path: "/" }).catch((err) => { });
  122.                 }
  123.                 if (index === 2) this.dialogVisible = true;
  124.             },
  125.         },
  126.     };
  127. </script>
  128.  
  129. <style>
  130.     .el-tabs__content {
  131.         display: none;
  132.     }
  133. </style>
  134. <style lang="scss" scoped>
  135.     .el-menu-item {
  136.         padding-left: 1vh !important;
  137.     }
  138.  
  139.     .layoutContent {
  140.         display: flex;
  141.  
  142.         .el-menu-vertical-demo {
  143.             width: 0px;
  144.             overflow: hidden;
  145.             transition: all 0.3s;
  146.         }
  147.  
  148.         .showMenu {
  149.             width: 118px;
  150.         }
  151.     }
  152.  
  153.     .layout {
  154.         background-color: rgb(247, 248, 250);
  155.         height: 100vh;
  156.         width: 70%;
  157.         // flex-shrink: 1;
  158.         flex-grow: 1;
  159.  
  160.         .tabs {
  161.             background-color: white;
  162.             margin-top: 2px;
  163.         }
  164.  
  165.         .navbar {
  166.             display: flex;
  167.             justify-content: space-between;
  168.             align-items: center;
  169.             width: 100%;
  170.             height: 50px;
  171.             background-color: white;
  172.             font-size: 25px;
  173.             padding: 0 20px;
  174.             box-sizing: border-box;
  175.         }
  176.  
  177.         .user {
  178.             display: flex;
  179.             align-items: center;
  180.         }
  181.  
  182.         .el-icon-refresh {
  183.             margin-right: 10px;
  184.         }
  185.     }
  186.  
  187.     .el-dropdown-link {
  188.         cursor: pointer;
  189.         color: #409eff;
  190.     }
  191.  
  192.     .el-icon-arrow-down {
  193.         font-size: 12px;
  194.     }
  195.  
  196.     .demonstration {
  197.         display: block;
  198.         color: #8492a6;
  199.         font-size: 14px;
  200.         margin-bottom: 20px;
  201.     }
  202.  
  203.     ::v-deep .el-tabs {
  204.         background-color: #fff;
  205.     }
  206.  
  207.     ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
  208.         background-color: #fff;
  209.         border-radius: 0px 0px 10px 10px !important;
  210.     }
  211.  
  212.     ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
  213.     ::v-deep .el-tabs--card>.el-tabs__header {
  214.         border: none !important;
  215.         background-color: #eaf4fe !important;
  216.     }
  217.  
  218.     ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  219.         border: none !important;
  220.         border-radius: 10px 10px 0px 0px !important;
  221.         background: transparent !important;
  222.     }
  223. </style>

tags.vue文件

  1. <template>
  2.     <div class="app-tag">
  3.         <el-tag size="medium" :disable-transitions="true" :effect="$route.path === '/' ? 'dark' : 'plain'" :hit="true"
  4.             @click="$router.push({ path: '/' })">
  5.             <i class="el-icon-custom"></i>
  6.             首页
  7.         </el-tag>
  8.         <el-tag closable size="medium" v-for="(tag, index) in tags" :key="index" :disable-transitions="true"
  9.             :effect="$route.path === tag.url ? 'dark' : 'plain'" :hit="true" @close="handleClose(tag, index)"
  10.             @click="handleClick(tag)">
  11.             <i :class="`el-icon-${tag.icon}`"></i>
  12.             {{ tag.title }}
  13.         </el-tag>
  14.     </div>
  15. </template>
  16. <script>
  17. import { mapState, mapMutations } from 'vuex';
  18. export default {
  19.     data() {
  20.         return {
  21.             tags: [],
  22.         }
  23.     },
  24.     created() {
  25.         //stateTagsList的值默认为空数组
  26.         this.tags = this.stateTagsList;
  27.     },
  28.     computed: {
  29.         ...mapState(['stateTagsList'])
  30.     },
  31.     mounted() {
  32.         // 返回时删除二级tags目录
  33.         let _this = this
  34.         window.addEventListener("popstate", function (e) {
  35.             _this.closeCurrent()
  36.         }, false);
  37.     },
  38.     methods: {
  39.         ...mapMutations({
  40.             close: 'mutationCloseTag',
  41.             closeCurrent: 'mutationCloseCurrentTag'
  42.         }),
  43.         handleClose(tag, index) {
  44.             this.close(tag) // 删除当前tag
  45.             if (this.$router.path === tag?.url) { // 如果关闭的标签不是当前路由的话，不做路由跳转
  46.                 return
  47.             } else {
  48.                 if (index === (this.tags.length - 1)) { // 关闭最后一个标签,则路由跳转至最后一个
  49.                     this.$router.push({ path: this.tags[index]?.url })
  50.                 } else { // 路由跳转至下一个标签页
  51.                     if (index === 0) {
  52.                         this.$router.push({ path: this.tags[0]?.url })
  53.                     } else {
  54.                         this.$router.push({ path: this.tags[index - 1]?.url })
  55.                     }
  56.                 }
  57.             }
  58.         },
  59.         // 点击tags具体标签
  60.         handleClick(tag) {
  61.             this.$router.push({ path: tag?.url }).catch(err => { })
  62.         }
  63.     }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .app-tag {
  68.     padding: 0 10px;
  69.     margin-bottom: 1vh;
  70.     display: flex;
  71.     align-items: center;
  72.     flex-wrap: nowrap;
  73.     overflow-x: scroll;
  74.     padding-bottom: 4px;
  75.  
  76.     .el-tag {
  77.         cursor: pointer;
  78.         border: 0;
  79.         border-radius: 0 0 10px 10px;
  80.         background-color: #fff;
  81.         color: black;
  82.  
  83.         ::v-deep .el-tag__close {
  84.             color: black;
  85.         }
  86.     }
  87.  
  88.     .el-tag--dark {
  89.         border-radius: 0;
  90.         background-color: #eaf4fe;
  91.         color: #409eff;
  92.  
  93.         ::v-deep .el-tag__close {
  94.             color: #409eff;
  95.         }
  96.     }
  97. }</style>

store文件

  1. import Vue from "vue";
  2. import Vuex from "vuex";
  3. Vue.use(Vuex);
  4. export default new Vuex.Store({
  5.   state: {
  6.     stateTagsList: [],
  7.   },
  8.   getters: {},
  9.   mutations: {
  10.     mutationSelectTags(state, data) {
  11.       // 选择tag标签
  12.       let result = false;
  13.       for (let i = 0; i < state.stateTagsList.length; i++) {
  14.         if (state.stateTagsList[i].url === data.url) {
  15.           return (result = true);
  16.         }
  17.       }
  18.       result === false ? state.stateTagsList.push(data) : "";
  19.     },
  20.     mutationCloseTag(state, data, _router) {
  21.       //  单击关闭tag标签
  22.       let result = state.stateTagsList.findIndex(
  23.         (item) => item.url === data.url
  24.       );
  25.       state.stateTagsList.splice(result, 1);
  26.     },
  27.     mutationCloseAllTag(state, data) {
  28.       // 关闭全部tag
  29.       state.stateTagsList.splice(0, state.stateTagsList.length);
  30.     },
  31.     mutationCloseCurrentTag(state, data) {
  32.       // 返回时关闭一个tag
  33.       state.stateTagsList.splice(-1, 1);
  34.     },
  35.   },
  36.   actions: {},
  37.   modules: {},
  38. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/530533
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号