当前位置：首页 > article >正文

后台通用tag面包屑

article 2024/11/23 8:52:49

思路：要实现点击左侧菜单栏，页面跳转且显示面包屑(本文用的是TS+Vue3)
功能点：

最多显示5个标签
超过5个时，自动移除最早的标签
至少保留1个标签
支持标签关闭功能

首先在store.ts 处理路由（点击过的路由，当前的路由信息）,只需要用到增加和删除tag逻辑
addVisitedView：去和现在项目配置的路由数组做匹配（path），获取点击过的路由信息，存入tag内，然后判断如果访问过的路由中已经存在该路由，则更新当前路由，不重复添加标签，return掉，如果没有存在该路由，则添加新路由再更新当前路由，加超过5个时，自动移除最早的标签。
deleteVisitedView：查找要删除的路由在数组中的索引，如果找到了该路由（index > -1）则删除它

import { defineStore } from 'pinia'
// 定义访问过的路由
interface TagView {
  title: string
  path: string
}
export const useMenuStore = defineStore('menu', {
	state:()=>({
	    visitedViews: [] as TagView[], // 访问过的路由
   		currentView: null as TagView | null // 当前路由
	}),
    actions: {
    // 添加访问过的路由
    addVisitedView(route: any) {
      const menuItem = this.menuList.find(item => item.path === route.path)
      if (!menuItem) return
      // 定义访问过的路由
      const tag: TagView = {
        title: menuItem.title,
        path: route.path
      }
      // 如果访问过的路由中已经存在该路由，则更新当前视图，不重复添加标签
      if (this.visitedViews.some(v => v.path === tag.path)) {
        this.currentView = tag
        return
      }
      // 添加到访问过的路由
      this.visitedViews.push(tag)
      // 更新当前路由
      this.currentView = tag
      // 如果访问过的路由超过5个，则删除第一个
      if (this.visitedViews.length > 5) {
        this.visitedViews.shift()
      }
    },
    // 删除访问过的路由
    deleteVisitedView(path: string) {
      const index = this.visitedViews.findIndex(v => v.path === path)
      // 如果访问过的路由中存在该路由，则删除
      if (index > -1) {
        this.visitedViews.splice(index, 1)
      }
    },
  }
})

标签组件页面显示：
使用watch去监听路由的改变，来动态添加路由，调用store里面的addVisitedView和deleteVisitedView来进行增加删除，然后这里的业务逻辑只处理页面的路由跳转
关闭标签的逻辑：如果删除的不是当前选中的标签，则直接删除
如果删除的选中的标签

如果是首，则到当前列表的第一个
如果是尾，则到当前列表的最后一个
如果是中间的，则是当前列表的后一个标签

<template>
    <div class="bread-container">
        <el-tag v-for="tag in visitedViews" :key="tag.path" :closable="visitedViews.length > 1"
            :effect="route.path === tag.path ? 'dark' : 'plain'" @click="handleTagClick(tag)"
            @close="handleCloseTag(tag)" class="tag-item" size="large">
            {{ tag.title }}
        </el-tag>
    </div>
</template>
<script setup lang="ts">
import { watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMenuStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const menuStore = useMenuStore()
const { visitedViews } = storeToRefs(menuStore)
// 定义 TagView 类型
interface TagView {
    title: string
    path: string
}

// 监听路由变化时添加到访问记录
watch(() => route.path,
    () => { menuStore.addVisitedView(route) },
    { immediate: true })

// 点击标签
const handleTagClick = (tag: TagView) => {
    router.push(tag.path)
}
// 关闭标签
const handleCloseTag = (tag: TagView) => {
    menuStore.deleteVisitedView(tag.path)
  if (route.path === tag.path) {
    // 先找到要关闭标签的索引
    const index = menuStore.visitedViews.findIndex(v => v.path === tag.path)
    //默认关闭的不是首尾标签
    let nextTag = menuStore.visitedViews[index + 1]
    if (index === 0) {
      // 如果关闭的是第一个标签，跳转到新的第一个标签
      nextTag = menuStore.visitedViews[1]
    } else if (index === menuStore.visitedViews.length - 1) {
      // 如果关闭的是最后一个标签，跳转到前一个标签
      nextTag = menuStore.visitedViews[menuStore.visitedViews.length - 2]
    }
      router.push(nextTag.path) 
  }
}
</script>
<style scoped lang="scss">
.bread-container {
    margin-top: 20px;

    .tag-item {
        margin-left: 12px;
        font-size: 16px;
    }
}
</style>