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

vue2中左侧菜单和头部tab标签联动_vue头部菜单和左侧菜单联动

作者：秋刀鱼在做梦 | 2024-08-12 22:04:56

赞

踩

vue头部菜单和左侧菜单联动

效果图

我这里是使用的vue2 + element-ui来实现的，代码可以直接拿来使用

一、首先先安装element-ui

element-ui官网

npm i element-ui -S

 然后在main.js里面配置，安装官网的步骤来就可以了，这里就不一一介绍了

  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. import App from './App.vue';
  5.  
  6. Vue.use(ElementUI);
  7.  
  8. new Vue({
  9.   el: '#app',
  10.   render: h => h(App)
  11. });

二、vue页面 

home页面 

这个页面也就是主页，这里我把左侧菜单，中间内容的头部tab标签页给拆成了两个子组件他们分别是leftMenu.vue和multipleTabs.vue页面

  1. <template>
  2.   <el-container>
  3.     <el-aside width="collapse ? 200px : 70px">
  4.       <el-button color="#626aef" @click="collapseToggle()">
  5.         <el-icon>
  6.           <Expand v-if="collapse" />
  7.           <Fold v-else />
  8.         </el-icon>
  9.       </el-button>
  10.       <el-menu
  11.           :collapse="collapse"
  12.           :default-active="store.bbc"
  13.           class="el-menu-vertical-demo"
  14.           unique-opened
  15.           active-text-color="#ffd04b"
  16.           text-color="#fff"
  17.           background-color="transparent"
  18.           @select="store.vv"
  19.          >
  20.        <left :dataToSon="store.mm" />
  21.       </el-menu>
  22.     </el-aside>
  23.     <el-container>
  24.       <el-header height="80px">
  25.         <h1 @click="fff">大可的管理系统 - v1.0</h1>
  26.         <div>
  27.           <img src="@/assets/111.jpg" alt="">
  28.           <span></span>
  29.           <el-button type="primary" @click="LogOut">退出登录</el-button>
  30.         </div>
  31.       </el-header>
  32.       <el-main>
  33.         <tab></tab>
  34.       </el-main>
  35.       <el-footer height="50px">
  36.         <p>&copy; 版权所有： 大可</p>
  37.       </el-footer>
  38.     </el-container>
  39.   </el-container>
  40. </template>
  41.  
  42. <script setup lang="ts">
  43. import { ref } from 'vue';
  44. import { useRouter } from "vue-router";
  45. import left from "../left.vue";
  46. import  tab from '../tab.vue';
  47. import { ElMessage, ElMessageBox} from "element-plus";
  48. import { useAuthStore } from '@/store';
  49. import preventBack from 'vue-prevent-browser-back';//组件内单独引入
  50. const mixins = [preventBack];
  51. const store = useAuthStore();
  52. const collapse = ref<boolean>(false)
  53. const router = useRouter();
  54. const tiao = () => {
  55.   console.log('路由')
  56.   router.push('/son1')
  57. }
  58. const fff = () => {
  59.   router.replace('/son2')
  60. }
  61. const collapseToggle = () => {
  62.   collapse.value = !collapse.value
  63. }
  64. const ggvv  = ref([1,2,3])
  65. const handleOpen = () => {
  66.   console.log()
  67. }
  68. const gg = (e) => {
  69.   console.log(e)
  70. }
  71. const handleClose = () => {
  72.   console.log()
  73. }
  74. const LogOut = () => {
  75.   ElMessageBox.confirm(
  76.       '确定要退出登录?',
  77.       'Warning',
  78.       {
  79.         confirmButtonText: '确定',
  80.         cancelButtonText: '取消',
  81.         type: 'warning',
  82.       }
  83.   )
  84.       .then(() => {
  85.         router.replace('/login')
  86.         ElMessage({
  87.           type: 'success',
  88.           message: '退出成功',
  89.         })
  90.       })
  91.       .catch(() => {
  92.         ElMessage({
  93.           type: 'info',
  94.           message: '您取消了退出',
  95.         })
  96.       })
  97. }
  98. </script>
  99.  
  100. <style scoped>
  101. .el-header {
  102.   background: url("@/assets/111.jpg");
  103.   background-color: #f3d19e;
  104.   display: flex;
  105.   align-items: center;
  106.   justify-content: space-between;
  107. }
  108. .el-header h1 {
  109.   font-size: 26px;
  110.   color: #fff;
  111.   letter-spacing: 10px;
  112. }
  113. .el-header div {
  114.   margin-right: 30px;
  115. }
  116. .el-header img {
  117.   width: 40px;
  118.   border-radius: 40px;
  119.   vertical-align: middle;
  120.   margin-right: 10px;
  121. }
  122. .el-header span {
  123.   font-size: 18px;
  124.   color: #fff;
  125.   margin-right: 10px;
  126. }
  127. .el-header el-button {
  128.   margin-left: 10px;
  129. }
  130.  
  131. .el-aside {
  132.   height: 100vh;
  133.   background: url('@/assets/111.jpg');
  134.   transition: width 0.3s;
  135.   text-align: right;
  136. }
  137. .el-aside .el-button {
  138.    margin: 20px 10px 20px 0;
  139.  }
  140. .el-aside .el-menu {
  141.   border-right: none;
  142. }
  143. .el-footer {
  144.   background-color: #EBEEF5;
  145.   display: flex;
  146.   align-items: center;
  147. }
  148. .el-footer p {
  149.   font-size: 12px;
  150.   color: #666;
  151. }
  152.  
  153.  
  154. </style>

左侧菜单页面leftMenu.vue

  1. <template>
  2.   <div>
  3.     <fragment v-for="(item, index) in list" :key="index">
  4.       <!-- 非叶子节点 -->
  5.       <el-submenu v-if="item.children" :index="item.path">
  6.         <template slot="title">
  7.           <i class="el-icon-location"></i>
  8.           <span class="menu" slot="title">{{ item.name }}</span>
  9.         </template>
  10.         <left-menu :dataToSon="item.children"></left-menu>
  11.       </el-submenu>
  12.       <!-- 叶子节点（功能节点） -->
  13.       <el-menu-item v-else :index="item.path">
  14.         <i class="el-icon-menu"></i>
  15.         <span class="menu" slot="title">{{ item.name }}</span>
  16.       </el-menu-item>
  17.     </fragment>
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. import leftMenu from '../../../src/views/home/leftMenu.vue'
  23.  
  24. export default {
  25.   // eslint-disable-next-line vue/multi-word-component-names
  26.   name: 'leftMenu',
  27.   components: {
  28.     leftMenu
  29.   },
  30.   props: ['dataToSon'],
  31.   data () {
  32.     return {
  33.       isCollapse: false,
  34.       list: []
  35.     }
  36.   },
  37.   mounted () {
  38.     this.list = this.dataToSon
  39.   },
  40.   methods: {
  41.     handleOpen (key, keyPath) {
  42.       console.log(key, keyPath)
  43.     },
  44.     handleClose (key, keyPath) {
  45.       console.log(key, keyPath)
  46.     }
  47.   }
  48. }
  49. </script>
  50.  
  51. <style scoped>
  52.  
  53. </style>

头部tab标签页multipleTabs.vue

  1. <template>
  2.   <div>
  3.     <el-tabs v-model="activeTab" type="card" closable >
  4.       <el-tab-pane
  5.         v-for="item in this.$store.state.tabOne"
  6.         :key="item.id"
  7.         :label="item.name"
  8.         :name="item.path"
  9.       >
  10.         {{item.content}}
  11.       </el-tab-pane>
  12.     </el-tabs>
  13.   </div>
  14. </template>
  15.  
  16. <script>
  17. import { mapState, mapMutations } from 'vuex'
  18. export default {
  19.   name: 'MultipleTabs',
  20.   computed: {
  21.     ...mapState({
  22.       vuexActiveTab: 'title'
  23.     }),
  24.     activeTab: {
  25.       get () {
  26.         return this.vuexActiveTab
  27.       },
  28.       set (newValue) {
  29.         this.handleTabChange(newValue)
  30.       }
  31.     }
  32.   },
  33.   data () {
  34.     return {
  35.       editableTabsValue: this.$store.state.title
  36.     }
  37.   },
  38.   mounted () {
  39.     console.log(this.$store.state.title)
  40.   },
  41.   methods: {
  42.     ...mapMutations(['SET_ACTIVE_TAB']),
  43.     handleTabChange (tab) {
  44.       this.SET_ACTIVE_TAB(tab)
  45.     }
  46.   }
  47. }
  48. </script>
  49.  
  50. <style scoped>
  51.  
  52. </style>

最后就是vuex里面的代码了

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. Vue.use(Vuex)
  5.  
  6. export default new Vuex.Store({
  7.   state: {
  8.     tree: [
  9.       {
  10.         path: 'vv',
  11.         name: '首页',
  12.         func_fid: 0,
  13.         id: '1000',
  14.         children: [
  15.           {
  16.             path: 'sy',
  17.             name: '首页儿子',
  18.             func_fid: 1000,
  19.             id: '1212'
  20.           }
  21.         ]
  22.       },
  23.       {
  24.         path: 'hh',
  25.         name: '系统管理',
  26.         func_fid: 0,
  27.         id: '1',
  28.         children: [
  29.           {
  30.             id: '1-1',
  31.             func_fid: 1,
  32.             path: 'son1',
  33.             name: '系统管理儿子'
  34.           },
  35.           {
  36.             id: '2',
  37.             func_fid: 1,
  38.             path: 'hhh',
  39.             name: '系统管理-角色',
  40.             children: [
  41.               {
  42.                 id: '222',
  43.                 func_fid: 1,
  44.                 path: 'son1-1-1',
  45.                 name: '角色管理',
  46.                 children: [
  47.                   {
  48.                     id: '12',
  49.                     func_fid: 2,
  50.                     path: 'son1-1-1',
  51.                     name: '角色管理儿子',
  52.                     children: [
  53.                       {
  54.                         id: '122',
  55.                         func_fid: 2,
  56.                         path: 'son1-1-1-1',
  57.                         name: '角色管理儿子-----孙子'
  58.                       }
  59.                     ]
  60.                   }
  61.                 ]
  62.               }
  63.             ]
  64.           },
  65.           {
  66.             id: '122',
  67.             path: 'son1-2',
  68.             name: '用户管理'
  69.           }
  70.  
  71.         ]
  72.       },
  73.       {
  74.         path: 'ss',
  75.         name: '教学管理',
  76.         id: '22',
  77.         func_fid: 0,
  78.         children: [
  79.           {
  80.             path: 'son2',
  81.             name: '教学管理儿子',
  82.             id: '202',
  83.             func_fid: 22
  84.           }
  85.         ]
  86.       },
  87.       {
  88.         path: 'zz',
  89.         name: '行政管理',
  90.         id: '3',
  91.         func_fid: 0,
  92.         children: [
  93.           {
  94.             path: 'son3',
  95.             name: '行政管理儿子',
  96.             id: '33',
  97.             func_fid: 3
  98.           }
  99.         ]
  100.       },
  101.       {
  102.         path: 'cv',
  103.         name: '测试管理',
  104.         id: '4',
  105.         func_fid: 0,
  106.         children: []
  107.       }
  108.     ],
  109.     tabs: [],
  110.     tabOne: [],
  111.     title: 'vv'
  112.   },
  113.   getters: {
  114.   },
  115.   mutations: {
  116.     tab (state, payload) {
  117.       function recursion (t) {
  118.         state.tabs.push(t)
  119.         if (t.children && t.children.length > 0) {
  120.           for (let i = 0; i < t.children.length; i++) {
  121.             recursion(t.children[i])
  122.           }
  123.         }
  124.       }
  125.       state.tree.forEach(item => {
  126.         recursion(item)
  127.       })
  128.       state.tabs.forEach(item => {
  129.         if (item.path === payload) {
  130.           const ind = state.tabOne.findIndex(i => i === item)
  131.           state.title = item.path
  132.           if (ind === -1) {
  133.             state.tabOne.push(item)
  134.           }
  135.         }
  136.       })
  137.       console.log(state.tabOne)
  138.     },
  139.     SET_ACTIVE_TAB (state, newValue) {
  140.       state.title = newValue
  141.     }
  142.   },
  143.   actions: {
  144.   },
  145.   modules: {
  146.   }
  147. })

到此左侧菜单和头部tab标签联动就已经完成了

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

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

  

闽ICP备14008679号