vue3.0+ts+element-plus多页签应用模板：头部工具栏（中）_vue3+elementplus+ts实现多页签窗口-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46172278/article/details/115352423

本文档详细介绍了如何使用Vue3.0、TypeScript和Element-Plus构建一个多页签应用模板，包括标签栏功能分析、获取已访问路由信息、创建组件并实现拖拽排序。通过Vuex管理状态，实现了标签的显示、切换、拖拽排序以及右键菜单功能。此外，还提供了Vue-draggable-next库用于拖拽排序的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章

一、标签栏功能分析

我们这个多页签系统模板的灵魂就是这个标签栏组件了。类似于我们经常使用的浏览器的标签栏，它能够容纳所有已经打开的标签页，并进行切换路由、关闭路由、拖拽排序等操作。

我们先来设想一下标签栏应该包括那些功能：

显示所有已访问的路由标签
点击标签可切换路由
标签可拖拽排序
标签拥有右键菜单，包括：刷新、关闭、关闭右侧、关闭其他、关闭所有

这些就是我们标签栏组件所要实现的功能了，话不多说，开始行动吧。

二、获取已访问路由信息

既然我们需要展示出所有已经访问的路由标签，我们就需要在每次切换路由的时候，将路由信息添加进一个数组中。于是，我们需要先在vuex中定义这样一个状态。由于我们之前已经在vuex中定义了tag模块（大家忘了的可以回去看一下同系列文章：多级路由缓存），所以这里我们在tag.ts中新增一个viewList状态和activeView状态（代码只展示相关部分）：

import {
   
    Module } from 'vuex'
import {
   
    RouteRecord, RouteRecordName } from 'vue-router'
import {
   
    TagStateProps, RootStateProps, ViewListItemProps } from '../typings'
import router from '@/router'
import Utils from '@/utils'

const clearCache = (state: TagStateProps) => {
   
   
  // 由于我在编写各个页面的时候，就规定组件名是对应路由名的首字母大写，
  // 所以这里的组件名只需要封装一个处理方法，将路由名的首字母大写即可 ↓↓↓
  state.cachedList = state.viewList.map((view) => Utils.getBigName(view.name as string))
}

const tagModule: Module<TagStateProps, RootStateProps> = {
   
   
  namespaced: true,
  state: {
   
   
    activeView: 'workbench',
    viewList: [{
   
    name: 'workbench', label: '工作台' }]
  },
  mutations: {
   
   
    ADD_VIEW(state, route: RouteRecord) {
   
   
      const routeName = route.name!
      const routeLabel = route.meta!.label as string
      // 判断路由是否已经存在
      const isViewExist = state.viewList.some((view) => view.name === routeName)
      // 路由不存在则将路由加入viewList
      if (!isViewExist) {
   
   
        state.viewList.