从零开始Vue3+Element Plus后台管理系统(七)——手写一个简单的多页签组件

以前都是用别人现成的多页签组件，自己也想尝试下做个Vue3的版本，目前还只有基本功能，慢慢完善。

主要思路

1. 使用 Pinia 记录页签数据、处理操作
2. 初始状态没有页签数据，使用默认路由数据填充
3. 右击页签，显示更多关闭操作
4. 使用el-scrollbar 实现横向滚动

store/tags 处理页签

页签的数据和操作都在store中，

• list是页签数据
• nameList保存页签路由的name，用于布局文件的keep-alive

<keep-alive :include="tags.nameList">
   <component :is="Component"></component>
</keep-alive>

• 对页签的基本操作：增加页签、关闭、关闭其他、关闭全部

引入了持久化插件pinia-plugin-persistedstate，只要设置persist即可在页面刷新时保持页签数据不丢失，具体可以看专栏上篇文章《从零开始Vu3+Element Plus后台管理系统(六)——状态管理Pinia和持久化》

import {
   
    defineStore } from 'pinia'
import {
   
    ref, computed } from 'vue'

interface ListItem {
   
   
  name: string
  path: string
  title: string
}

export const useTagsStore = defineStore(
  'tags',
  () => {
   
   
    let list = ref<ListItem[]>([])

    let show = computed(() => {
   
   
      return list.value.length > 0
    })
    let nameList = computed(() => {
   
   
      return list.value.map((item: ListItem) => item.name)
    })

    function delTagsItem(index: number) {
   
   
      list.value.splice(index, 1)
    }
    function setTagsItem(data: ListItem) {
   
   
      list.value.push(data)
    }
    function clearTags() {
   
   
      list.value = []
    }
    function closeTagsOther(data: ListItem[]) {
   
   
      list.value = data
    }

    return {
   
    list, show, nameList, delTagsItem, setTagsItem, clearTags, closeTagsOther }
  },
  {
   
   
    persist