vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签

多页签测试

编辑src/views/Main.vue，template段header-center下最后面添加如下代码。

<el-scrollbar>
    <div class="navbar">
        <el-tag v-for="item in 20" :key="item" type="primary">Tag{{ item }}</el-tag>
    </div>
</el-scrollbar>

style段header-center修改如下

.header-center {
    flex-grow: 1;
    display: flex;
    align-items: center;

    width: 1px;

    .el-scrollbar {
        margin: 0 12px;

        .navbar {
            display: flex;

            .el-tag {
                margin-right: 10px;
                cursor: pointer;
            }
        }
    }
}

发现多页签正常显示了，并且当页签超过内容时鼠标移上去会显示滚动条。

上面的样式要注意width: 1px;，这里一定要设置width，可以设置任意值，如果不设置布局就会出问题。

多页签Store

编辑src/types/index.d.ts，新建IFastnavItem页签数据类型。

interface IFastnavItem {
    desc: string
    path: string
}

新建src/store/fastnav.ts，内容如下。

import { defineStore } from 'pinia'


const useFastnavStore = defineStore('appfastnav', {
    state: () => {
        const datas: IFastnavItem[] = []
        const currPath: string = ''

        return {
            datas,
            currPath,
        }
    },
    
    persist: true,

    actions: {
        addData(desc: string, path: string) {
            const data = this.datas.find(item => item.path == path)
            if (data) {
                this.currPath = path
                return
            }

            this.datas.push({ desc, path })

            this.currPath = path
        },
    }
})


export default useFastnavStore

编辑src/router/index.ts，在合适的时机插入页签数据。

import * as MenuUtil from '@/util/menu'
import useFastnavStore from '@/store/fastnav'

if (isAddRoute) {
    if (to.meta.desc) {
        const fastnavStore = useFastnavStore()
        fastnavStore.addData(to.meta.desc as string, to.path)
    }

    next()
    return
}

多页签显示

编辑src/views/Main.vue，导入和使用多页签Store。

import useColorStore from '@/store/color'
import useFastnavStore from '@/store/fastnav'

const colorStore = useColorStore()
const fastnavStore = useFastnavStore()

编辑src/views/Main.vue，template段header-center下el-scrollbar修改如下。

<el-scrollbar>
    <div class="navbar">
        <el-tag v-for="item in fastnavStore.datas" :type="item.path == fastnavStore.currPath ? 'primary' : 'info'" size="large">
            {{ item.desc }}
        </el-tag>
    </div>
</el-scrollbar>