欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動的項(xiàng)目實(shí)踐

 更新時間：2023年11月24日 10:22:54   作者：吃葡萄不吐葡萄皮嘻嘻  
本文講述了如何使用Vue.js中的ElementUI組件庫實(shí)現(xiàn)el-menu與el-tabs的聯(lián)動,通過在el-menu中選擇菜單項(xiàng),可以切換el-tabs的內(nèi)容區(qū)域,具有一定的參考價值,感興趣的可以了解一下

效果圖如下：

在這里插入圖片描述

當(dāng)標(biāo)簽欄很多的時候效果圖如下：

在這里插入圖片描述

左側(cè)菜單布局 （$route.path高亮顯示激活路由 :default-active="$route.path"）

 <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#323744"
          text-color="#fff"
          active-text-color="#409eff"
          :collapse="iscollapse"
          unique-opened
          :collapse-transition="false"
          router
        >
         
          <template v-for="(item, index) in menuList">
             <!-- 有下拉 -->
            <el-submenu v-if="item.children" :index="item.id" :key="index">
              <template slot="title">
                <svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group
                v-for="(item, index) in item.children"
                :key="index"
              >
                <el-menu-item :index="item.path" @click="clickMenu(item)">
                  <template slot="title">
                    <svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
                    <span>{{ item.subtitle1 }}</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 沒有下拉 -->
            <el-menu-item v-else :key="index" :index="item.path" @click="clickMenu(item)">
              <svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
              <span slot="title">{{ item.subtitle1 }}</span>
            </el-menu-item>
          </template>
        </el-menu>

模擬數(shù)據(jù)如下：（以下路徑均需在router/index.js里面進(jìn)行配置）

menuList: [
        {
          id: "9",
          subtitle1: "首頁",
          icon: "shangjiadianpu",
          path: "/welcome",
        },
        {
          id: "1",
          title: "用戶管理",
          icon: "huangguanyonghu",
          children: [
            {
              id: "1-1",
              subtitle1: "時間-moment",
              icon: "huangguanyonghu",
              path: "/user",
            },
            {
              id: "1-2",
              subtitle1: "刪除用戶",
              icon: "huangguanyonghu",
              img: require("@/assets/logo.png"),
              path: "/user2",
            },
            {
              id: "1-3",
              subtitle1: "圖片放大",
              icon: "huangguanyonghu",
              path: "/user3",
            },
          ],
        },
        {
          id: "2",
          title: "表格",
          icon: "ershoujiaoyi",
          children: [
            {
              id: "2-1",
              subtitle1: "表格排序",
              icon: "ershoujiaoyi",
              path: "/tableSort",
            },
            {
              id: "2-2",
              subtitle1: "動畫",
              icon: "ershoujiaoyi",
              path: "/animation",
            },
            {
              id: "2-3",
              subtitle1: "權(quán)限3",
              icon: "ershoujiaoyi",
              path: "/limit3",
            },
          ],
        },
        {
          id: "6",
          subtitle1: "拖拽-sortablejs",
          icon: "shangpuchuzu",
          path: "/sortable",
        },
         {
          id: "7",
          title: "功能",
          icon: "ershoujiaoyi",
          children: [
            {
              id: "7-1",
              subtitle1: "上下滾動",
              icon: "ershoujiaoyi",
              path: "/numscroll",
            },
             {
              id: "7-9",
              subtitle1: "數(shù)字滾動",
              icon: "ershoujiaoyi",
              path: "/icountup",
            },
            {
              id: "7-2",
              subtitle1: "動畫",
              icon: "ershoujiaoyi",
              path: "/animation",
            },
            {
              id: "7-3",
              subtitle1: "調(diào)用攝像頭",
              icon: "ershoujiaoyi",
              path: "/opencamera",
            },
            {
              id: "7-4",
              subtitle1: "裁剪圖片",
              icon: "ershoujiaoyi",
              path: "/cropperjs",
            },
            {
              id: "7-5",
              subtitle1: "裁剪圖片2",
              icon: "ershoujiaoyi",
              path: "/vuecropper",
            },
            {
              id: "7-6",
              subtitle1: "打印功能",
              icon: "ershoujiaoyi",
              path: "/printjs",
            },
            {
              id: "7-7",
              subtitle1: "vue-pfd預(yù)覽",
              icon: "ershoujiaoyi",
              path: "/vuepdf",
            },
             {
              id: "7-8",
              subtitle1: "內(nèi)嵌iframe",
              icon: "ershoujiaoyi",
              path: "/iframepdf",
            },
             {
              id: "7-10",
              subtitle1: "放大鏡功能",
              icon: "ershoujiaoyi",
              path: "/magnifier",
            },
            {
              id: "7-11",
              subtitle1: "多表頭表格",
              icon: "ershoujiaoyi",
              path: "/xlsx",
            },
            {
              id: "7-12",
              subtitle1: "單表頭表格",
              icon: "ershoujiaoyi",
              path: "/xlsx2",
            },
             {
              id: "7-13",
              subtitle1: "Vuecontextmenu",
              icon: "ershoujiaoyi",
              path: "/vuecontextmenu",
            },
            {
              id: "7-14",
              subtitle1: "vcontextmenu",
              icon: "ershoujiaoyi",
              path: "/vcontextmenu",
            },
            {
              id: "7-15",
              subtitle1: "表格合并",
              icon: "ershoujiaoyi",
              path: "/tablehebing",
            },
            {
              id: "7-16",
              subtitle1: "日期選擇",
              icon: "ershoujiaoyi",
              path: "/datepicker",
            },
            {
              id: "7-17",
              subtitle1: "treeselect",
              icon: "ershoujiaoyi",
              path: "/treeselect",
            },
            {
              id: "7-19",
              subtitle1: "大屏數(shù)據(jù)",
              icon: "ershoujiaoyi",
              path: "/datav",
            },
            {
              id: "7-20",
              subtitle1: "左右菜單聯(lián)動",
              icon: "ershoujiaoyi",
              path:'/leftrightmenu'
            },
            {
              id: "7-18",
              subtitle1: "測試頁面",
              icon: "ershoujiaoyi",
              path: "/test",
            },
          ],
        },
      ],

主要內(nèi)容區(qū)域標(biāo)簽欄布局如下：

	<el-tabs
	  class="vab-tabs-content"
	    v-model="activeIndex"
	    type="card"
	    @tab-click="clickTab"
	    @tab-remove="removeTab"
	    
	  >
	      <el-tab-pane
	        v-for="item of openTab"
	        v-if="openTab.length"
	        :key="item.name"
	        :label="item.name"
	        :name="item.route"
	        :closable="isNoClosable(item)"
	      >
	      </el-tab-pane>
  </el-tabs>

標(biāo)簽欄樣式

/deep/.el-tabs__header .el-tabs__nav{
    border:none;
  }
  /deep/.el-tabs--card>.el-tabs__header{
    border:none;
  }
  /deep/.el-tabs__header .el-tabs__item{
    padding:0 30px;
    border:none
  }
  /deep/.el-tabs__header .el-tabs__item.is-active {
    color: #1890ff;
    background: #e8f4ff;
    outline: none;
    -webkit-mask: url(~@/assets/images/tabs-bg.png);
    mask: url(~@/assets/images/tabs-bg.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
  /deep/.el-tabs__header .el-tabs__item:hover {
      color: #515a6e;
      background: #dee1e6;
      -webkit-mask: url(~@/assets/images/tabs-bg.png);
      mask: url(~@/assets/images/tabs-bg.png);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
  }
  /deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
      padding-left: 30px;
      padding-right: 30px;
  }
  /deep/.el-tabs__header .el-tabs__item.is-active.is-closable {
    padding-left: 30px;
    padding-right: 30px;
}
  /deep/.el-tabs__header .el-tabs__item.is-active:hover {
      color: #1890ff !important;
      background: #e8f4ff !important;
      // padding: 0 30px 0 30px;
  }
  .el-tabs__header .el-tabs__item.is-active:hover {
    color: #1890ff;
    background: #e8f4ff;
    -webkit-mask: url(~@/assets/images/tabs-bg.png);
    mask: url(~@/assets/images/tabs-bg.png);
    -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
  }

創(chuàng)建一個倉庫模塊 @/store/Modules/tabs.js

在這里插入圖片描述

tabs.js代碼如下

export default{
    namespaced: true,  //開啟命名空間
    state: {
        openTab: JSON.parse(sessionStorage.getItem('openTab'))|| [],
        activeIndex: ''
      },
      mutations: {
        add_tabs (state, data) {
          //如果等于-1說明tabs不存在那么插入，否則什么都不做
          //findindex找角標(biāo)，循環(huán)判斷一下，如果等于那么就代表有相同的，就不必添加，如果找不到那就是-1.就添加
          let result = state.openTab.findIndex(item => item.name === data.name);
          result === -1 ? state.openTab.push(data) : '';
          // 存到本地 頁面刷新不丟失
          sessionStorage.setItem('openTab',JSON.stringify(state.openTab))
        },
        delete_tabs (state, route) {
          let index = 0
          for (let gohh of state.openTab) {
            if (gohh.route === route) {
              break
            }
            index++
          }
          state.openTab.splice(index, 1)
          // 存到本地 頁面刷新不丟失
          sessionStorage.setItem('openTab',JSON.stringify(state.openTab))
        },
        set_active_index (state, index) {
            console.log(index);
          state.activeIndex = index
        }
      }
}

將tab.js模塊引入@store/index.js

import Vue from 'vue'
import Vuex from 'vuex
import tabs from './Modules/tabs'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { 
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    tabs
  }
})

主要邏輯代碼如下：

在主要內(nèi)容區(qū)域引入如下代碼獲取tabs.js倉庫里面的值在頁面進(jìn)行渲染

  computed: {
    openTab () {
      return this.$store.state.tabs.openTab
    },
    activeIndex: {
      get () {
        return this.$store.state.tabs.activeIndex
      },
      set (val) {
        this.$store.commit('tabs/set_active_index', val)
      }
    }
  },

給左側(cè)菜單導(dǎo)航綁定點(diǎn)擊事件clickMenu，去觸發(fā)倉庫的add_tabs事件，把數(shù)組添加到openTab數(shù)組里面（添加前需要判斷openTab是否有當(dāng)前值，有就不添加，反之添加），把a(bǔ)ctiveIndex也改變

clickMenu(val){
   //備注 ：分模塊觸發(fā)事件可參考vue官網(wǎng)  '模塊名/事件名'
    this.$store.commit('tabs/add_tabs',{route: val.path , name: val.subtitle1 })
    this.$store.commit('tabs/set_active_index', val.path)
 },

給標(biāo)簽綁定點(diǎn)擊事件clickTab 跳轉(zhuǎn)到對應(yīng)路由，給標(biāo)簽叉叉綁定removeTab (tab-remove 點(diǎn)擊 tab 移除按鈕后觸發(fā) 被刪除的標(biāo)簽的 name)拿到對應(yīng)的路由進(jìn)行判斷

1、如果是首頁則不刪除；
2、如果刪除的高亮激活這一項(xiàng)，則跳轉(zhuǎn)到最后openTab數(shù)組的最后一項(xiàng)并高亮；
3、如果刪除的不是高亮激活這一項(xiàng)，則不跳轉(zhuǎn)，高亮激活項(xiàng)不變。

clickTab (tab) {
   console.log(tab);
   this.$router.push({path: this.activeIndex})
 },
 removeTab (target) {
   if(target == '/'||target == '/welcome'){
      return
    }
   this.$store.commit('tabs/delete_tabs', target)
   if (this.activeIndex === target) {
     // 設(shè)置當(dāng)前激活的路由
     if (this.openTab && this.openTab.length >= 1) {
       console.log('=============', this.openTab[this.openTab.length - 1].route)
       this.$store.commit('tabs/set_active_index', this.openTab[this.openTab.length - 1].route)
       this.$router.push({path: this.activeIndex})
     }
   }
 },

給el-tab-pane標(biāo)簽綁定屬性 :closable="isNoClosable(item)判斷el-tab-pane是否顯示叉叉，除了首頁不顯示，其他均顯示

isNoClosable(item){
   return item.route !== '/welcome'
 },

刷新時以當(dāng)前路由做為tab加入tabs，當(dāng)前路由不是首頁時，添加首頁以及另一頁到store里，并設(shè)置激活狀態(tài)，當(dāng)前路由是首頁時，添加首頁到store，并設(shè)置激活狀態(tài)（注意：this.$route.meta.title的title值要和菜單數(shù)據(jù)里面的subtitle1名稱保持一致?。。。?/p>

在這里插入圖片描述

mounted () {
    console.log(this.$route);
    // 刷新時以當(dāng)前路由做為tab加入tabs
    // 當(dāng)前路由不是首頁時，添加首頁以及另一頁面到store里，并設(shè)置激活狀態(tài)
    // 當(dāng)前路由是首頁時，添加首頁到store，并設(shè)置激活狀態(tài)
    if (this.$route.path !== '/welcome') {
      this.$store.commit('tabs/add_tabs', {route: '/welcome' , name: '首頁'})
      this.$store.commit('tabs/add_tabs', {route: this.$route.path , name: this.$route.meta.title })
      this.$store.commit('tabs/set_active_index', this.$route.path)
      
    } else {
      this.$store.commit('tabs/add_tabs', {route: '/welcome', name: '首頁'})
      this.$store.commit('tabs/set_active_index', '/welcome')
      
    }
  }

實(shí)現(xiàn)思路大致就是這樣，主要自己項(xiàng)目的數(shù)據(jù)稍作修改。

到此這篇關(guān)于vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)vue el-menu與el-tabs聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 詳解在vue3中使用jsx的配置以及一些小問題

    詳解在vue3中使用jsx的配置以及一些小問題

    本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue+iview寫個彈框的示例代碼

    vue+iview寫個彈框的示例代碼

    本篇文章主要介紹了vue+iview寫個彈框的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue使用dagre-d3畫流程圖的完整代碼

    vue使用dagre-d3畫流程圖的完整代碼

    這篇文章主要給大家介紹了關(guān)于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個用于在Vue.js框架中實(shí)現(xiàn)DAG（有向無環(huán)圖）可視化的庫,它結(jié)合了vue.js、dagre和d3.js這三個庫的功能,需要的朋友可以參考下
    2024-02-02
  • 關(guān)于Vue3使用axios的配置教程詳解

    關(guān)于Vue3使用axios的配置教程詳解

    道axios是一個庫,并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關(guān)于Vue3使用axios的配置教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • Vue請求后端接口導(dǎo)出excel表格方式

    Vue請求后端接口導(dǎo)出excel表格方式

    這篇文章主要介紹了Vue請求后端接口導(dǎo)出excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue利用vant組件實(shí)現(xiàn)輪播圖效果

    vue利用vant組件實(shí)現(xiàn)輪播圖效果

    vant組件適用于移動端項(xiàng)目,目前項(xiàng)目開源,是市面上做的比較好的開源項(xiàng)目,功能比較強(qiáng)大,本文小編就來為大家介紹一下如何利用vant實(shí)現(xiàn)輪播圖效果吧
    2023-10-10
  • vue使用element-ui tabs切換echarts解決寬度100%方式

    vue使用element-ui tabs切換echarts解決寬度100%方式

    這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能

    Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能

    cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動端組件庫，由于很長一段時間沒有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧
    2023-01-01
  • 淺談Vue中插槽slot的使用方法

    淺談Vue中插槽slot的使用方法

    這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關(guān)資料展開其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助
    2021-11-11
  • 在vue中多次調(diào)用同一個定義全局變量的實(shí)例

    在vue中多次調(diào)用同一個定義全局變量的實(shí)例

    今天小編就為大家分享一篇在vue中多次調(diào)用同一個定義全局變量的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論