vue3.2实现多页签导航

本文使用vue3.2 + elementPlus + pinia 实现多页签导航

一、实现思路

  1. 单击菜单时数据添加store对象,添加数据时要去重以及数量限制,不可无限添加
  2. 多页签导航数据从store对象里取
  3. 初始化会显示【首页】标签导航,同时固定不可删除
  4. 单击多页签导航,跳转到对应路由
  5. 激活样式处理
  6. 持久化处理
  7. 删除多页签导航事件

二、具体实现步骤

1. 定义store

js 复制代码
// src/store/tag-list.js
import { defineStore } from "pinia";

export const useTagStore = defineStore('tag',{
    state: ()=> ({
        tagList: [
            // 初始化默认展示【首页】标签导航
            {
                path:'/index',
                name: 'index',
                meta: { title: '首页'}
            }
        ]
    }),
    getters: {
        tagListGetter: state=> state.tagList
    },
    actions: {
        addTag(item) {
            this.tagList.push(item)
        },
        delTag(item) {
            // 找出要删除的tag的索引值
            const i = this.tagList.findIndex(v => v.path === item.path)
            this.tagList.splice(i,1)
        }
    },
    // 持久化
    persist: {
        enabled: true, // 开启
        strategies: [
            {
                key: 'tagList',
                storage: sessionStorage
            }
        ]

    }

2. 单击菜单时数据添加store对象

在导航组件中(naveItem.vue)添加点击事件addTag

xml 复制代码
    <!-- 无子级 -->
    <el-menu-item :index="item.path" v-if="!item.children" @click="addTag(item)">
        <el-icon><Menu /></el-icon>
        <span>{{item.meta.title}}</span>
    </el-menu-item>
    <!-- 有子级 -->
    <el-sub-menu :index="item.path" v-else>
        <template #title>{{item.meta.title}}</template>
        <nav-item v-for="sub in item.children" :key="sub.path" :item="sub"></nav-item>
    </el-sub-menu>

addTag方法逻辑如下,已有注释,不再详细说明。

js 复制代码
import { storeToRefs } from 'pinia'
import { useTagStore } from '@/store/tag-list.js'
const tagStore = useTagStore()
const { tagList } = storeToRefs(tagStore)

const { item } = defineProps({
    item: {
        type: Object
    }
})

// 点击路由,添加标签导航,注意去重
const addTag = (item) => {
    // 添加前判断是否已存在
    const isRepeat = tagList.value.some(v => v.path === item.path) // 找到则返回true,否则返回false
    if(isRepeat) return
    // 限制最多只能打开10个标签导航页
    if(tagList.value.length === 10) {
        // 自动把第二个删除
        tagStore.delTag(tagList.value[1])
    }
    // 添加
    tagStore.addTag(item)
}

3. 定义一个tag组件

定义一个tag组件,从store中取出tagList并渲染;

  1. 首页标签导航不可关闭,通过当前tag的path不等于首页的path来控制el-tag的closeable是否展示;

  2. 定义默认展示的导航标签defaultUrl,默认为首页的path(/index);通过监听路由变化,将defaultUrl 等于变化后的路由地址;并且在template中判断:tag的path是否等于defaultUrl,是则不设置type(el-tag不设置type默认为蓝色),其他则为type=info;

  3. 点击导航标签,能够跳转到对应路由,给标签添加handleJump事件。

  4. 删除导航标签事件

    • 删除的不是当前激活模块,正常删除
    • 删除的是当前激活模块
      1. 当前激活模块是最后一个导航标签,则需要高亮前一个导航标签
      2. 当前激活模块不是最后一个导航标签,则需要高亮后一个导航标签

代码代码如下:

ini 复制代码
    <div class="tags">
        <el-scrollbar class="scroll-container">
            <el-tag
                v-for="(tag,index) in tagList"
                :key="tag.path"
                class="mx-1"
                :closable="tag.path !== '/index'"
                :type="tag.path === defaultUrl? '' : 'info'"
                @click="handleJump(tag)"
                @close="handleClose(tag,index)"
            >
                {{ tag?.meta?.title }}
            </el-tag>
        </el-scrollbar>
    </div>
js 复制代码
import { ref,watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useTagStore } from '@/store/tag-list.js'

const route = useRoute()
const router = useRouter()
const tagStore =  useTagStore()
const { tagList } = storeToRefs(tagStore)

// 高亮当前路由导航的标签页
const defaultUrl = ref('/idnex')
watch(route,(newVal,oldVal) => {
    defaultUrl.value = newVal.path

},{deep: true,immediate: true})

// 跳转路由
const handleJump = (tag) => {
    // 重复点击标签,不跳转
    if(route.path === tag.path) return
    router.push(tag.path)
}

// 关闭标签
const handleClose = (tag, i) => {
    // store 删除
    tagStore.delTag(tag)
    // 1.删除非当前模块,正常删除
    if(route.path !== tag.path) return
    // 2.删除当前模块
    if(i === tagList.value.length) {
        // 2.1当前模块属于最后一个模块,删除后需要高亮前一个模块
        handleJump(tagList.value[i-1])
    }else {
        // 2.2当前模块属于中间模块模块,删除后需要高亮后一个模块
        handleJump(tagList.value[i])
    }
}

具体效果

第一次写文章,如写的不好的地方希望各位友友们不吝提出宝贵的意见,如有误的地方欢迎大家指出,感谢各位!

相关推荐
一个处女座的程序猿O(∩_∩)O6 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
GIS开发特训营2 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
一个处女座的程序猿O(∩_∩)O5 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.11 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
2401_8576009514 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009514 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL14 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味14 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_8575834915 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js