耀极客论坛

 找回密码
 立即注册
查看: 489|回复: 0

vue+element实现页面顶部tag思路详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 01:03:58 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue+element实现页面顶部tag效果,页面显示由数组循环得出,数组可存储在store里,tags数组里面已经有值,由于默认是白色,所以页面上看不出,接下来就是给选中的标签高亮,需要的朋友可以参考下

  这种tag如何写?思路总结下:

1. 页面渲染
  1页面显示由数组循环得出,数组可存储在store里
(1)存储前判断是否有重复的数据,重复的话,先删除再添加。
(2)没有重复直接push
  1. addTag: (state, tag) => {
  2.     const { fullPath, path, meta, query } = tag
  3.     if (tag.path === '/login') {
  4.       return false
  5.     }
  6.     const findIndex = state.tags.findIndex(item => item.path === tag.path)
  7.     console.log(findIndex)
  8.     if (findIndex >= 0) {
  9.       state.tags.splice(findIndex, 1, { fullPath, path, meta, query })
  10.     } else {
  11.       state.tags.push({ fullPath, path, meta, query })
  12.     }
  13.   },
复制代码
  2何时触发这个添加路由方法,监听路由进入的时候,调此方法将当前this实例上的route对象携带过去。
  1. computed: {
  2. currentRoute() {
  3.       return this.$route
  4.     },
  5. },
  6. watch: {
  7.     $route: {
  8.       handler(val) {
  9.         if (val.name) {
  10.           this.addTags()
  11.         }
  12.       },
  13.       // 深度观察监听
  14.       deep: true
  15.     }
  16.   },
  17.   methods:{
  18.   addTags() {
  19.   //this.$store.dispatch 先提交给action,由他异步处理处罚mutation里面的方法,改变state里面的tags值
  20.       this.$store.dispatch('user/addTag', this.currentRoute)
  21.     },}
复制代码
  此时,tags数组里面已经有值,由于默认是白色,所以页面上看不出,接下来就是给选中的标签高亮。
1element 有个参数可以设定,可以查文档。
2选中的tag值是否等于当前路由进入的页面一致,一致则为true。
  1. ‹span v-for="(tag, index) in tags" :key="index" class="tag-span">
  2.         ‹el-tag
  3.           :closable="isCloseable"
  4.           :effect="setTagColor(tag)"
  5.           @close="closeTags(tag)"
  6.           @click="toTagRoute(tag)"
  7.         >
  8.           {{ tag.meta.title }}
  9.         ‹/el-tag>
  10.       ‹/span>
  11. methods:{
  12. setTagColor(tag) {
  13.       return this.currentRoute.path === tag.path ? 'dark' : 'plain'
  14.     },
  15.     }
复制代码
  此时,tag的渲染和选中就完成了。

2. 来回切换tag
  1. methods:{
  2. toTagRoute(tag) {
  3.       this.$router.push({
  4.         path: tag.fullPath || tag.path
  5.       })
  6.     },
  7. }
复制代码
3. 删除一个tag标签
  1由于是数组,你无法确定用户删除哪一个,所以需要遍历找出用户当前选中的tag。然后删除,同时更新store里的值。
2删除当前tag,高亮的标签是哪一个?这里是删除标签的前一个标签,也就是数组最后一个元素。
  1. methods:{
  2. closeTags(tag) {
  3.       console.log(tag, 4444)
  4.       this.$store.dispatch('user/delTag', tag)
  5.       this.toLastTagRouter(this.$store.state.user.tags)//高亮删除标签的前一个tag
  6.     },
  7.      toLastTagRouter(tags) {
  8.       //注意此处传入tags是已删除后的,所以不能使用splice==》改变原数组;slice==》不改变原数组拿去数组最后一个元素
  9.       const latestView = tags.slice(-1)[0]//tags数组最后一个元素
  10.       console.log(latestView)
  11.       if (latestView !== undefined && latestView.path !== undefined) {
  12.         const { fullPath, meta, path, query } = latestView
  13.         this.$router.push({ fullPath, meta, path, query })
  14.       }
  15.     },
  16. }
  17. //action
  18. delTag({ commit }, tag) {
  19.     commit('delTag', tag)
  20.   },
  21. //mutation
  22. delTag: (state, tag) => {
  23.     //entries()对象变成一个可遍历的数组【0,{name:a,age:'20'}】
  24.     //这里使用forEach和map也可以
  25.     for (const [i, v] of state.tags.entries()) {
  26.       if (v.path === tag.path) {
  27.         state.tags.splice(i, 1)
  28.         break
  29.       }
  30.     }
  31.   },
复制代码
  删除全部标签
  1. methods:{
  2. closeAllTags() {
  3.       // 关闭所有 tag,仅剩余一个
  4.       this.$store.dispatch('user/delAllTags')
  5.       const { fullPath, meta, path, query } = this.$store.state.user.tags[0]
  6.       // 跳转剩余 tag 路由
  7.       this.$router.push({ fullPath, meta, path, query })
  8.     },
  9. }
  10. //action
  11. delAllTags({ commit }) {
  12.     commit('delAllTags')
  13.   },
  14. //mutation
  15. delAllTags: (state) => {
  16.     state.tags.splice(1, state.tags.length)
  17.   },
复制代码
  到此这篇关于vue+element如何实现页面顶部tag的文章就介绍到这了,更多相关vue element页面顶部tag内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:15 , Processed in 0.067975 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表