快捷導(dǎo)航

elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動(dòng)的示例代碼

更新時(shí)間：2024年06月25日 09:43:57 作者：前端小白小白白

多級(jí)聯(lián)動(dòng)是一種常見的交互方式,本文主要介紹了elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動(dòng)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下

技術(shù)：vue2+vuex+elementui

在這里插入圖片描述

store/index.js文件里

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    tabList:[]
  },
  mutations: {
    addTab: (state, tab) => {
      // 如果tab已經(jīng)存在，不添加新的tabs
      if (state.tabList.some(item => item.path === tab.path)) return
      state.tabList.push(tab)
    }
  },
  getters: {
    // 獲取tbsList
    getTabs: (state) => {
      return state.tabList
    }
  },
  actions: {
  },
  modules: {
  }
})

功能點(diǎn)：
1：當(dāng)前活躍的tab就是當(dāng)前路由的path
2: 頁面刷新，tabList數(shù)據(jù)丟失，則在刷新之前使用sessionStorage進(jìn)行存儲(chǔ)
3：刪除tab的時(shí)候，活躍的tab變?yōu)楸粍h除的前一個(gè)或者下一個(gè)，刪除后重新設(shè)置活躍的tab 和tabList
4：監(jiān)控路由變化，路由變化了，活躍的tab 和tabList 也要隨之變化

<template>
  <el-tabs
    v-model="activeTab"
    closable
    @tab-remove="removeTab"
    @tab-click="clickBtn"
  >
    <el-tab-pane
      :key="index"
      v-for="(item, index) in tabList"
      :label="item.title"
      :name="item.path"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import store from '../../store'
export default {
  name: '',
  data() {
    return {
      // 當(dāng)前活躍的tabs
      activeTab: '',
    }
  },
  components: {},
  computed: {
    tabList() {
      return store.getters['getTabs']
    },
  },
  watch: {
    $route: function () {
      this.setActiveTab()
      this.addTab()
    },
  },
  created() {},
  mounted() {
    this.beforeRefresh()
    this.setActiveTab()
    this.addTab()
  },
  methods: {
    // 設(shè)置活躍的tab
    setActiveTab() {
      this.activeTab = this.$route.path
    },
    // 添加tab
    addTab() {
      const { path, meta } = this.$route
      const tab = {
        path,
        title: meta.title,
      }
      store.commit('addTab', tab)
    },
    // 點(diǎn)擊tab
    clickBtn(tab) {
      const { name } = tab
      this.$router.push({ path: name })
    },
    // 刪除tab
    removeTab(target) {
      // 當(dāng)前激活的tab
      let active = this.activeTab
      const tabs = this.tabList
      // 只有一個(gè)標(biāo)簽頁的時(shí)候不允許刪除
      if (tabs.length === 1) return
      if (active === target) {
        tabs.forEach((tab, index) => {
          // 如果刪除的就是當(dāng)前活躍的tab,就把活躍的tab變成上一個(gè)或下一個(gè)
          const nextTab = tab[index + 1] || tab[index - 1]
          if (nextTab) {
            active = nextTab.path
          }
        })
      }
      // 重新設(shè)置當(dāng)前激活的選項(xiàng)卡和 選項(xiàng)卡列表
      this.activeTab = active
      store.state.tabList = tabs.filter((tab) => tab.path !== target)
    },
    // 解決刷新數(shù)據(jù)丟失問題
    beforeRefresh() {
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('tabsView', JSON.stringify(this.tabList))
      })
      let tabSession = sessionStorage.getItem('tabsView')
      if (tabSession) {
        let oldTabs = JSON.parse(tabSession)
        if (oldTabs.length > 0) {
          store.state.tabList = oldTabs
        }
      }
    },
  },
}
</script>

補(bǔ)充：路由

{
    path: '/layout',
    component: () => import('../layout/index.vue'),
    children: [
      {
        path: 'lay1',
        component: () => import('../views/lay/Lay1.vue'),
        meta: {
          title:'選項(xiàng)1'
        }
      },
      {
        path: 'lay2',
        component: () => import('../views/lay/Lay2.vue'),
        meta: {
          title:'選項(xiàng)2'
        }
        
      },
      {
        path: 'lay3',
        component: () => import('../views/lay/Lay3.vue'),
        meta: {
          title:'選項(xiàng)3'
        }
      },
      {
        path: 'lay4',
        component: () => import('../views/lay/Lay4.vue'),
        meta: {
          title:'選項(xiàng)4'
        }
      },
    }

到此這篇關(guān)于elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)element 標(biāo)簽頁與菜單欄聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: