vue 管理系统顶部tags浏览历史实现

废话

demo预览
vue 管理系统顶部tags浏览历史实现_第1张图片

vue 管理系统顶部tags浏览历史实现_第2张图片

完成了哪些

  1. 默认有首页,不能关闭
  2. 点击路由菜单,判断有无存在,没有就添加,有就定位到上面
  3. 点击跳转,点击X可关闭
  4. 关闭当前页,自动跳到下一个tag页面
  5. 如果当前页在最后一个,默认跳到上一个tag页面
  6. 右键菜单,刷新,关闭右侧,关闭所有
  7. 动态判断tags长多,放不下时,出现左右两侧按钮,减少时自动消失
  8. 动态判断窗口放大缩小,自动判断有无左右两侧按钮

正文

不用任何vuex,乱七八糟的方法,全在一个文件,粘贴即用
vue 管理系统顶部tags浏览历史实现_第3张图片
放到你想要的位置即可(此demo,放在了面包屑上面)

先安装 (监听某dom元素大小的包)

npm install element-resize-detector

tags.vue






重点

需要修改的地方
vue 管理系统顶部tags浏览历史实现_第4张图片

currentPgae.name 是路由结构的name,判断有无存在,没有就添加,有就定位到上面,根据项目修改
vue 管理系统顶部tags浏览历史实现_第5张图片
监听刷新时,去本地存储 tags 和 当前页面的active,Ftistpage1 改成自己的首页即可

笔记

getBoundingClientRect()介绍

tab版的同样功能 完善了自动定位当前元素,推荐使用

你可能感兴趣的:(前端,vue,vue.js,前端,tags,elementui,管理系统)