element-plus 实现的tab导航栏

今天你码了吗

已于 2023-12-12 16:51:10 修改

阅读量1.5k

点赞数 5

文章标签： vue.js elementui javascript

于 2023-12-12 16:38:12 首次发布

本文链接：https://blog.csdn.net/weixin_50249353/article/details/134953240

版权

文章介绍了如何使用Vue.js构建一个可管理的Tab组件，实现页面路由更新时的标签切换，以及利用cookies存储和清除标签列表。

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

<template>
    <div class="f-tag-list" :style="{left: $store.state.isclapse ? '65px' : '250px'}">
        <el-tabs
            v-model="activeTab"
            type="card"
            style="min-width:100px"
            @tab-remove="deleteTab"
            @tab-change="changeTab"
        >
            <el-tab-pane
            v-for="item in tabList"
            :key="item.path"
            :label="item.title"
            :name="item.path"
            :closable="item.path != '/'"
            >
            </el-tab-pane>
        </el-tabs>
        <span class="tag-btn">
             <el-dropdown @command="handleClose">
                <span class="el-dropdown-link">
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
    <div style="height:44px">
    </div>
</template>


<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies'
import { router } from '@/router';
    const route = useRoute()
    const cookie = useCookies()

    const activeTab = ref(route.path)
    const tabList =  ref([
            {
                title: '后台首页',
                path: "/"
            }
        ])
    //  先初始化一下tab
    const initTab = () => {
        let tbs = cookie.get("tabList")
        if (tbs) {
            tabList.value = tbs
        }
    }
    initTab()
    const addTab = (tab) => {
        let havetab = tabList.value.find(o => o.path == tab.path)
        if(!havetab) {
            tabList.value.push(tab)
        }
        // 存储起来 不然刷新后就没了
        cookie.set("tabList", tabList.value)
    }
    // 路由更新之前 激活项改变 并且生成新的tab标签
    onBeforeRouteUpdate((to, from) => {
        activeTab.value = to.path
        addTab({
            title: to.meta.title,
            path: to.path
        })
    })
    const changeTab = (t) => {
        activeTab.value = t
        router.push(t)
    }
    const deleteTab = (d) => {
        // 关闭之后 如果关闭的是已经选中的 应该向后移动一个选中 或者向前移动一个 如果不是就直接关闭
        let a = activeTab.value
        let tabs = tabList.value
        if(a == d) {
            tabs.forEach((item,index) => {
                if(item.path == d){
                    const nextTab = tabs[index +1] || tabs[index - 1]
                    if(nextTab) {
                        a = nextTab.path
                    }
                }
            })
        }
        console.log(a, activeTab.value,'1111')
        activeTab.value = a
        tabList.value = tabList.value.filter(item => item.path != d)
        cookie.set("tabList", tabList.value)
    }
    // 全部关闭 和关闭其他
    // 全部关闭 和关闭其他
    const handleClose = (c) => {
        if(c == 'clearAll') {
             // 切换回首页
             activeTab.value = "/"
             tabList.value = tabList.value.filter(item => item.path == '/')
        } else if(c == 'clearOther') {
            tabList.value = tabList.value.filter(item => item.path == '/' || item.path == activeTab.value)
        }
        cookie.set("tabList", tabList.value)
    }
</script>


<style scoped>
.f-tag-list{
    @apply fixed bg-gray-100 flex items-center px-2;
    top: 64px;
    right: 0;
    height: 44px;
    z-index: 100;
}
.tag-btn{
    @apply bg-white rounded ml-auto flex items-center justify-center px-2;
    height: 32px;
}
:deep(.el-tabs__header){
    border: 0!important;
     height: 32px;
    @apply mb-0;
}
:deep(.el-tabs__nav){
    border: 0!important;
}
:deep(.el-tabs__item){
    border: 0!important;
    height: 32px;
    line-height: 32px;
    @apply bg-white mx-1 rounded;
}
:deep(.el-tabs__nav-next),:deep(.el-tabs__nav-prev){
    line-height: 32px;
    height: 32px;
}
:deep(.is-disabled){
    cursor: not-allowed;
    @apply text-gray-300;
}
</style>