vue3 elementplus tabs切换实现

Tabs 标签页 | Element Plus

html 复制代码
<template>
  <!-- editableTabsValue 是当前tab 的 name -->
  <el-tabs
    v-model="editableTabsValue"
    type="border-card"
    editable
    @edit="handleTabsEdit"
  >
    <!-- 这个是标签面板 面板数据 遍历 editableTabs 渲染-->
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      <!-- 页面内容 采用这种写法 包裹 keep-alive 标签是 组件保持keep-alive -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'
import { watch } from 'vue'

const route = useRoute()
const router = useRouter()

const initTab = {
  title: route.meta.title || 'New Tab',
  name: '1',
  url: route.fullPath,
}
// 使用对象张开运算符 复制 initTab 直接使用 inittab指向的是同一个对象
// editableTabs tabs 数据 是一个数组 里面是对象 每个对象是一个标签页
const editableTabs = ref([{ ...initTab }])
// tabindex 是最新标签 name 新标签为 tabIndex = tabIndex + 1
let tabIndex = editableTabs.value.length
// 当前的激活页 name
const editableTabsValue = ref(editableTabs.value[0].name)

// 监听 $route 对象的变化 如果路由发生变化 就更新 editableTabs 中的 url 和 title
watch(
  () => route.fullPath,
  (newPath) => {
    editableTabs.value.forEach((tab) => {
      if (tab.name === editableTabsValue.value) {
        if (tab.url === newPath) {
          return
        }
        tab.url = newPath
        tab.title = route.meta.title || 'New Tab'
      }
    })
  },
  { deep: true },
)
// 监听 editableTabsValue 的变化
//如果 editableTabsValue 变化了 就是切换了标签页 就更新路由到对应标签页
watch(
  () => editableTabsValue.value,
  (newValue) => {
    editableTabs.value.forEach((tab) => {
      if (tab.name === newValue) {
        if (tab.url === route.fullPath) {
          return
        }
        router.push(tab.url)
      }
    })
  },
)
// 处理标签页的编辑事件
// targetName 是当前标签页的 name
const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add',
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    const newtab = { ...initTab }
    newtab.name = newTabName
    editableTabs.value.push(newtab)
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    // 如果删除的是当前激活的标签页,需要找到下一个标签页作为新的激活页
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>
<style>
.el-tabs__new-tab {
  margin-right: 20px;
}
</style>
相关推荐
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
SY_FC4 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
爱吃香蕉的阿豪4 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
渣渣盟5 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam6 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录6 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录6 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript