前言

后台管理通常页面较多，试想一下，如果一个页面跳转另外一个页面，假如你操作的页面，有很多是相同的，只是功能点不同，那么你每次都得从左侧菜单找到他，点击跳转，体验交互不是那么优雅，为了解决这个问题，多标签页组件，就显得尤为重要了。

布局

解析

1、实现布局

2、当标签数量超出屏幕的时候，左右需要展示箭头按钮，用于滚动内容

3、右侧固定一个快捷操作按钮

4、每个标签可关闭

5、给标签添加一个拖动效果

6、给标签添加右键展开操作菜单功能

7、自适应宽度，显示操作按钮

8、点击标签，可跳转到路由页面

9、暂列这些吧，其实还有很多可以实现的，一个体验好的组件，需要处理的可多了O(∩_∩)O哈哈~

实现布局

以上只是布局思路，删减了一些动态绑定class代码，如需完整代码，可查看github仓库

超出屏幕

这里我们用到一个库，element-resize-detector，安装 yarn add element-resize-detector

核心代码

固定快捷操作

模板实现

script代码

标签右键展开

模板代码

script代码

拖动

这里借助一款插件，vuedraggable 安装 yarn add vuedraggable

核心代码

标签跳转

这里分析一下完整思路，标签是通过从 watch route.fullPath 然后 从route 中，组装一个简易tab结构，保存在vuex中，跳转代码如下

标签持久化

最终效果

完整源码

https://github.com/jekip/naive-ui-admin/blob/main/src/layout/components/TagsView/index.vue

顺手点个 Star 吧，谢谢~