前言
後臺管理通常頁面較多，試想一下，如果一個頁面跳轉另外一個頁面，假如你操作的頁面，有很多是相同的，只是功能點不同，那麼你每次都得從左側選單找到他，點選跳轉，體驗互動不是那麼優雅，為了解決這個問題，
多標籤頁元件
，就顯得尤為重要了。
佈局
解析
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
吧，謝謝~
