vue实现动态Tab标签页功能,10分钟拿下!

1.效果展示

2.功能梳理

2.1 前言

我们在实现一个功能之前一定要先去梳理一下功能需求。

不要害怕设计功能会花费很多时间,前期只有把逻辑打通了,后面写代码就会很容易。不然后面就会一直修修补补,浪费大量时间。

做任何事情,都别急。慢慢来,反而比较快。

2.2 梳理功能需求

这里我们用到的 vue 脚手架是 vite,vue 的版本是 3.2,前端组件库是 Element plus。

我们要实现动态 Tab 标签页功能,肯定要用到 Element plus 的 el-tabs 组件。

el-tabs 的核心内容:

  • v-model 绑定的是当前激活的 tab 的 name
  • closable 属性表示可以关闭当前标签页
  • @tab-click tab 被选中时触发的方法
  • @tab-remove 点击 tab 移除按钮时触发的方法

例如:

css 复制代码
  <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>

因为我们要实现的是动态 Tab,所以 el-tab-pane 肯定需要用 v-for 进行遍历。

学会了 el-tabs 的用法,我们首先要把它放到一个位置,这个位置是通用的,并且在所有显示内容的上面。

没错,就是在 router-view 的上面。

接下来我们就需要实现以下几个功能:

1.初始化页面,加载所有新增的 Tab,激活当前 Tab。

2.点击左侧菜单栏,先判断是否存在该 Tab,如果不存在就新增 Tab。其中 Tab 的 name 就是菜单名,Tab 还要增加 path 属性,因为点击 tab 要跳转到相关的页面。

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

4.点击 Tab,激活 Tab ,并根据该 Tab 的 path 属性跳转页面。

5.移除 Tab,随机激活剩下的某一个 Tab,并跳转到激活 Tab 对应的页面。

6.sessionStorage 存储所有的 Tab、激活的 Tab。

3.功能实现

3.1 封装 el-tabs

js 复制代码
<!-- 动态tab标签页 -->
  <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个变量: 当前所有操作的 Tab 和激活的 Tab.

js 复制代码
// 当前激活的tab
let activeTab = ref("");
// 所有tab
let allTabs = ref([]);

加载所有 Tab 和激活的 Tab

js 复制代码
// 挂载 DOM 之前
onBeforeMount(() => {
  // 当前激活的菜单
  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 点击左侧菜单,新增并激活 Tab

1.首先存储激活的菜单

2.如果 Tab 名是首页,就移除所有 Tab

3.判断是否存在和菜单名一样的 Tab,不存在则添加。

4.激活 Tab

js 复制代码
// 点击左侧菜单
const saveActiveNav = (path, tab) => {
  // 当前激活的菜单
  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);
    }
    // 当前激活的tab
    activeTab.value = tab.name;
  }
};

3.4 点击 Tab,跳转页面

1.激活 Tab ,存储激活的 Tab

2.跳转页面

js 复制代码
// 点击tab
const clickTab = (tab) => {
  let tabName = tab.paneName;
  //  存储激活的 Tab
  sessionStorage.setItem("activeTab", tabName);
  let selectTab = allTabs.value.find((tab) => tab.name === tabName);
  if (selectTab !== undefined) {
    // 激活 Tab
    activeTab.value = selectTab.name;
    // 跳转页面,激活左侧菜单
    changeActiveRoute(selectTab.path);
  }
};

因为跳转页面和激活菜单会经常用到,所以这里写了一个通用的方法

js 复制代码
// 跳转路由,激活路由
const changeActiveRoute = (path) => {
  activePath.value = path;
  sessionStorage.setItem("activePath", path);
  router.push(path);
};

3.5 移除 Tab

1.通过索引-1或者索引+1获取下一个 Tab。

2.如果存在就激活 Tab,存储激活的 Tab,跳转页面。

3.否则就跳转到首页

4.激活 tab,移除点击的 Tab,存储所有的 Tab

js 复制代码
// 移除tab。targetName 要移除的tab
const removeTab = (targetName) => {
  let tabs = allTabs.value;
  // activeName 当前激活的tab
  let activeName = activeTab.value;
  if (activeTab.value === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        // 下一个 tab:索引-1或者索引+1
        const nextTab = tabs[index + 1] || tabs[index - 1];
        // 如果存在就激活 Tab,存储激活的 Tab,跳转页面
        if (nextTab) {
          activeName = nextTab.name;
          changeActiveRoute(nextTab.path);
          sessionStorage.setItem("activeTab", nextTab.name);
          // 否则就跳转到首页
        } else {
          changeActiveRoute("/index");
        }
      }
    });
  }
  // 激活 tab
  activeTab.value = activeName;
  // 移除选择的 Tab
  allTabs.value = tabs.filter((tab) => tab.name !== targetName);
  // 存储所有的 tab
  sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
};

4.完整代码

拿到代码之后,先 npm install 安装依赖,接着 npm run dev 运行项目。

关于动态 Tab 的功能都在 home.vue 文件里。

css 复制代码
通过网盘分享的文件:vue3-zhifou-tabs.zip
链接: https://pan.baidu.com/s/1NRGg9hoGSu4Ugxf_Bl0pZg?pwd=1234
提取码: 1234 
相关推荐
susu10830189111 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾2 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu4 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym9 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫10 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫14 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat16 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。2 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode