Vue如何实现顶部tags浏览历史

魁首哥

作者

Vue如何实现顶部tags浏览历史

这篇文章主要为大家展示了“Vue如何实现顶部tags浏览历史”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何实现顶部tags浏览历史”这篇文章吧。

废话

demo预览

实现的功能

默认有首页，不能关闭

点击路由菜单，判断有无存在，没有就添加，有就定位到上面

点击跳转，点击X可关闭

关闭当前页，自动跳到下一个tag页面

如果当前页在最后一个，默认跳到上一个tag页面

右键菜单，刷新，关闭右侧，关闭所有

动态判断tags长多，放不下时，出现左右两侧按钮，减少时自动消失

动态判断窗口放大缩小，自动判断有无左右两侧按钮

正文

不用任何vuex，乱七八糟的方法，全在一个文件，粘贴即用

放到你想要的位置即可(此demo,放在了面包屑上面)

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

npminstallelement-resize-detector

tags.vue

/deep/.el-tag--dark{border-color:transparent;}/deep/.el-tag--dark.el-tag__close{color:#86909c;font-size:16px;}/deep/.el-tag--dark.el-tag__close:hover{background:#e7eaf0;}.tags{position:relative;overflow:hidden;.arrow{width:48px;text-align:center;cursor:pointer;background:#fff;position:absolute;z-index:1;&_left{left:0;top:0;}&_right{right:0;top:0;}}&_content{transition:0.3s;white-space:nowrap;//padding:016px;}.top_tags{margin-right:8px;cursor:pointer;background:#fff;font-size:12px;font-weight:400;color:#1d2129;}.top_tags:hover,.active,.arrow:hover{background:#e7eaf0;}}