网站建设期间怎么关闭网站,娱乐网站名字,公司管理软件有哪些,网站模块下载思路#xff1a;要实现点击左侧菜单栏#xff0c;页面跳转且显示面包屑(本文用的是TSVue3) 功能点#xff1a;
最多显示5个标签超过5个时#xff0c;自动移除最早的标签至少保留1个标签支持标签关闭功能
首先在store.ts 处理路由#xff08;点击过的路由#xff0c;当前…思路要实现点击左侧菜单栏页面跳转且显示面包屑(本文用的是TSVue3) 功能点
最多显示5个标签超过5个时自动移除最早的标签至少保留1个标签支持标签关闭功能
首先在store.ts 处理路由点击过的路由当前的路由信息,只需要用到增加和删除tag逻辑 addVisitedView去和现在项目配置的路由数组做匹配path获取点击过的路由信息存入tag内然后判断 如果访问过的路由中已经存在该路由则更新当前路由不重复添加标签return掉如果没有存在该路由则添加新路由再更新当前路由加超过5个时自动移除最早的标签。 deleteVisitedView查找要删除的路由在数组中的索引如果找到了该路由index -1则删除它
import { defineStore } from pinia
// 定义访问过的路由
interface TagView {title: stringpath: 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 tagreturn}// 添加到访问过的路由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来进行增加删除然后这里的业务逻辑只处理页面的路由跳转 关闭标签的逻辑如果删除的不是当前选中的标签则直接删除 如果删除的选中的标签
如果是首则到当前列表的第一个如果是尾则到当前列表的最后一个如果是中间的则是当前列表的后一个标签
templatediv classbread-containerel-tag v-fortag in visitedViews :keytag.path :closablevisitedViews.length 1:effectroute.path tag.path ? dark : plain clickhandleTagClick(tag)closehandleCloseTag(tag) classtag-item sizelarge{{ tag.title }}/el-tag/div
/template
script setup langts
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: stringpath: 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 langscss
.bread-container {margin-top: 20px;.tag-item {margin-left: 12px;font-size: 16px;}
}
/style
