快捷導(dǎo)航

基于vue實(shí)現(xiàn)動(dòng)態(tài)Tab標(biāo)簽頁功能

更新時(shí)間：2024年09月24日 08:21:48 作者：知否技術(shù)

這篇文章主要介紹了如何基于vue實(shí)現(xiàn)動(dòng)態(tài)Tab標(biāo)簽頁功能,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.效果展示

2.功能梳理

2.1 前言

我們在實(shí)現(xiàn)一個(gè)功能之前一定要先去梳理一下功能需求。

不要害怕設(shè)計(jì)功能會(huì)花費(fèi)很多時(shí)間，前期只有把邏輯打通了，后面寫代碼就會(huì)很容易。不然后面就會(huì)一直修修補(bǔ)補(bǔ)，浪費(fèi)大量時(shí)間。

做任何事情，都別急。慢慢來，反而比較快。

2.2 梳理功能需求

這里我們用到的 vue 腳手架是 vite，vue 的版本是 3.2，前端組件庫是 Element plus。

我們要實(shí)現(xiàn)動(dòng)態(tài) Tab 標(biāo)簽頁功能，肯定要用到 Element plus 的 el-tabs 組件。

el-tabs 的核心內(nèi)容：

v-model 綁定的是當(dāng)前激活的 tab 的 name
closable 屬性表示可以關(guān)閉當(dāng)前標(biāo)簽頁
@tab-click tab 被選中時(shí)觸發(fā)的方法
@tab-remove 點(diǎn)擊 tab 移除按鈕時(shí)觸發(fā)的方法

例如：

  <el-tabs
    v-model="activeName"
    type="card"
    closable
    @tab-click="handleClick"
    @tab-remove ="handleRemove"
  >
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>

因?yàn)槲覀円獙?shí)現(xiàn)的是動(dòng)態(tài) Tab，所以 el-tab-pane 肯定需要用 v-for 進(jìn)行遍歷。

學(xué)會(huì)了 el-tabs 的用法，我們首先要把它放到一個(gè)位置，這個(gè)位置是通用的，并且在所有顯示內(nèi)容的上面。

沒錯(cuò)，就是在 router-view 的上面。

接下來我們就需要實(shí)現(xiàn)以下幾個(gè)功能：

1.初始化頁面，加載所有新增的 Tab，激活當(dāng)前 Tab。

2.點(diǎn)擊左側(cè)菜單欄，先判斷是否存在該 Tab，如果不存在就新增 Tab。其中 Tab 的 name 就是菜單名，Tab 還要增加 path 屬性，因?yàn)辄c(diǎn)擊 tab 要跳轉(zhuǎn)到相關(guān)的頁面。

3.新增 Tab 之后需要激活 Tab。

4.點(diǎn)擊 Tab，激活 Tab ，并根據(jù)該 Tab 的 path 屬性跳轉(zhuǎn)頁面。

5.移除 Tab，隨機(jī)激活剩下的某一個(gè) Tab，并跳轉(zhuǎn)到激活 Tab 對應(yīng)的頁面。

6.sessionStorage 存儲(chǔ)所有的 Tab、激活的 Tab。

3.功能實(shí)現(xiàn)

3.1 封裝 el-tabs

<!-- 動(dòng)態(tài)tab標(biāo)簽頁 -->
  <el-tabs
    v-if="allTabs.length > 0"
    v-model="activeTab"
    type="card"
    closable
    @tab-click="clickTab"
    @tab-remove="removeTab"
  >
    <el-tab-pane
      v-for="item in allTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>

3.2 初始化頁面操作

定義2個(gè)變量: 當(dāng)前所有操作的 Tab 和激活的 Tab.

// 當(dāng)前激活的tab
let activeTab = ref("");
// 所有tab
let allTabs = ref([]);

加載所有 Tab 和激活的 Tab

// 掛載 DOM 之前
onBeforeMount(() => {
  // 當(dāng)前激活的菜單
  activePath.value = sessionStorage.getItem("activePath")
    ? sessionStorage.getItem("activePath")
    : "/index";
  // 所有tab
  allTabs.value = JSON.parse(sessionStorage.getItem("allTabs")) || [];
  // 激活的tab
  activeTab.value = sessionStorage.getItem("activeTab") || "";
});

3.3 點(diǎn)擊左側(cè)菜單，新增并激活 Tab

1.首先存儲(chǔ)激活的菜單

2.如果 Tab 名是首頁，就移除所有 Tab

3.判斷是否存在和菜單名一樣的 Tab，不存在則添加。

4.激活 Tab

// 點(diǎn)擊左側(cè)菜單
const saveActiveNav = (path, tab) => {
  // 當(dāng)前激活的菜單
  activePath.value = path;
  sessionStorage.setItem("activePath", path);
  // 如果是首頁，就移除所有的 Tab
  if (tab.name === "首頁") {
    allTabs.value = [];
    sessionStorage.removeItem("allTabs");
    sessionStorage.removeItem("activeTab");
  } else {
    let index = allTabs.value.findIndex((item) => item.name === tab.name);
    //  如果不存在
    if (index === -1) {
      // 添加到tabs中
      allTabs.value.push(Object.assign(tab, { path: path }));
      sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
      sessionStorage.setItem("activeTab", tab.name);
    }
    // 當(dāng)前激活的tab
    activeTab.value = tab.name;
  }
};

3.4 點(diǎn)擊 Tab，跳轉(zhuǎn)頁面

1.激活 Tab ，存儲(chǔ)激活的 Tab

2.跳轉(zhuǎn)頁面

// 點(diǎn)擊tab
const clickTab = (tab) => {
  let tabName = tab.paneName;
  //  存儲(chǔ)激活的 Tab
  sessionStorage.setItem("activeTab", tabName);
  let selectTab = allTabs.value.find((tab) => tab.name === tabName);
  if (selectTab !== undefined) {
    // 激活 Tab
    activeTab.value = selectTab.name;
    // 跳轉(zhuǎn)頁面，激活左側(cè)菜單
    changeActiveRoute(selectTab.path);
  }
};

因?yàn)樘D(zhuǎn)頁面和激活菜單會(huì)經(jīng)常用到，所以這里寫了一個(gè)通用的方法

// 跳轉(zhuǎn)路由，激活路由
const changeActiveRoute = (path) => {
  activePath.value = path;
  sessionStorage.setItem("activePath", path);
  router.push(path);
};

3.5 移除 Tab

1.通過索引-1或者索引+1獲取下一個(gè) Tab。

2.如果存在就激活 Tab，存儲(chǔ)激活的 Tab，跳轉(zhuǎn)頁面。

3.否則就跳轉(zhuǎn)到首頁

4.激活 tab，移除點(diǎn)擊的 Tab，存儲(chǔ)所有的 Tab

// 移除tab。targetName 要移除的tab
const removeTab = (targetName) => {
  let tabs = allTabs.value;
  // activeName 當(dāng)前激活的tab
  let activeName = activeTab.value;
  if (activeTab.value === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        // 下一個(gè) tab：索引-1或者索引+1
        const nextTab = tabs[index + 1] || tabs[index - 1];
        // 如果存在就激活 Tab，存儲(chǔ)激活的 Tab，跳轉(zhuǎn)頁面
        if (nextTab) {
          activeName = nextTab.name;
          changeActiveRoute(nextTab.path);
          sessionStorage.setItem("activeTab", nextTab.name);
          // 否則就跳轉(zhuǎn)到首頁
        } else {
          changeActiveRoute("/index");
        }
      }
    });
  }
  // 激活 tab
  activeTab.value = activeName;
  // 移除選擇的 Tab
  allTabs.value = tabs.filter((tab) => tab.name !== targetName);
  // 存儲(chǔ)所有的 tab
  sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
};

到此這篇關(guān)于基于vue實(shí)現(xiàn)動(dòng)態(tài)Tab標(biāo)簽頁功能的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)Tab標(biāo)簽頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: