当标签导航太多时，超出页面宽度时，可以左右横向滑动

image.png
滑动后
image.png

4-1 添加scrollbar组件

element.ts中导入el-scrollbar

image.png

创建ScrollPanel组件

src/layout/components/TagsView/ScrollPanel.vue

  1. <template>
  2.   <el-scrollbar
  3.     wrap-class="scroll-wrapper"
  4.   >
  5.     <slot />
  6.   </el-scrollbar>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'ScrollPanel'
  12. }
  13. </script>
  15. <style lang="scss">
  16.   .scroll-wrapper {
  17.     position: relative;
  18.     width: 100%;
  19.     white-space: nowrap;
  20.   }
  21. </style>

以插槽形式包裹tagsview里面内容

4-2 修改tagsview

用scrollpanel组件包裹tagsview组件

image.png
这里样式简单做了个修改
image.png
src/layout/components/TagsView/index.vue

  1. <template>
  2.   <div class="tags-view-container">
  3.     <scroll-panel>
  4.       <div class="tags-view-wrapper">
  5.         <router-link
  6.           class="tags-view-item"
  7.           :class="{
  8.             active: isActive(tag)
  9.           }"
  10.           v-for="(tag, index) in visitedTags"
  11.           :key="index"
  12.           :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
  13.           tag="span"
  14.         >
  15.           {{ tag.title }}
  16.           <!-- affix固定的路由tag是无法删除 -->
  17.           <span
  18.             v-if="!isAffix(tag)"
  19.             class="el-icon-close"
  20.             @click.prevent.stop="closeSelectedTag(tag)"
  21.           ></span>
  22.         </router-link>
  23.       </div>
  24.     </scroll-panel>
  25.   </div>
  26. </template>
  28. <script lang="ts">
  29. import path from 'path'
  30. import { defineComponent, computed, watch, onMounted } from 'vue'
  31. import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
  32. import { useStore } from '@/store'
  33. import { RouteLocationWithFullPath } from '@/store/modules/tagsView'
  34. import { routes } from '@/router'
  35. import ScrollPanel from './ScrollPanel.vue'
  37. export default defineComponent({
  38.   name: 'TagsView',
  39.   components: {
  40.     ScrollPanel
  41.   },
  42.   setup() {
  43.     const store = useStore()
  44.     const router = useRouter()
  45.     const route = useRoute()
  46.     // 可显示的tags view
  47.     const visitedTags = computed(() => store.state.tagsView.visitedViews)
  49.     // 从路由表中过滤出要affixed tagviews
  50.     const fillterAffixTags = (routes: Array<RouteLocationWithFullPath | RouteRecordRaw>, basePath = '/') => {
  51.       let tags: RouteLocationWithFullPath[] = []
  52.       routes.forEach(route => {
  53.         if (route.meta && route.meta.affix) {
  54.           // 把路由路径解析成完整路径，路由可能是相对路径
  55.           const tagPath = path.resolve(basePath, route.path)
  56.           tags.push({
  57.             name: route.name,
  58.             path: tagPath,
  59.             fullPath: tagPath,
  60.             meta: { ...route.meta }
  61.           } as RouteLocationWithFullPath)
  62.         }
  64.         // 深度优先遍历 子路由（子路由路径可能相对于route.path父路由路径）
  65.         if (route.children) {
  66.           const childTags = fillterAffixTags(route.children, route.path)
  67.           if (childTags.length) {
  68.             tags = [...tags, ...childTags]
  69.           }
  70.         }
  71.       })
  72.       return tags
  73.     }
  75.     // 初始添加affix的tag
  76.     const initTags = () => {
  77.       const affixTags = fillterAffixTags(routes)
  78.       for (const tag of affixTags) {
  79.         if (tag.name) {
  80.           store.dispatch('tagsView/addVisitedView', tag)
  81.         }
  82.       }
  83.     }
  85.     // 添加tag
  86.     const addTags = () => {
  87.       const { name } = route
  88.       if (name) {
  89.         store.dispatch('tagsView/addView', route)
  90.       }
  91.     }
  93.     // 路径发生变化追加tags view
  94.     watch(() => route.path, () => {
  95.       addTags()
  96.     })
  98.     // 最近当前router到tags view
  99.     onMounted(() => {
  100.       initTags()
  101.       addTags()
  102.     })
  104.     // 当前是否是激活的tag
  105.     const isActive = (tag: RouteRecordRaw) => {
  106.       return tag.path === route.path
  107.     }
  109.     // 让删除后tags view集合中最后一个为选中状态
  110.     const toLastView = (visitedViews: RouteLocationWithFullPath[], view: RouteLocationWithFullPath) => {
  111.       // 得到集合中最后一个项tag view 可能没有
  112.       const lastView = visitedViews[visitedViews.length - 1]
  113.       if (lastView) {
  114.         router.push(lastView.fullPath as string)
  115.       } else { // 集合中都没有tag view时
  116.         // 如果刚刚删除的正是Dashboard 就重定向回Dashboard（首页）
  117.         if (view.name === 'Dashboard') {
  118.           router.replace({ path: '/redirect' + view.fullPath as string })
  119.         } else {
  120.           // tag都没有了 删除的也不是Dashboard 只能跳转首页
  121.           router.push('/')
  122.         }
  123.       }
  124.     }
  126.     // 关闭当前右键的tag路由
  127.     const closeSelectedTag = (view: RouteLocationWithFullPath) => {
  128.       // 关掉并移除view
  129.       store.dispatch('tagsView/delView', view).then(() => {
  130.         // 如果移除的view是当前选中状态view, 就让删除后的集合中最后一个tag view为选中态
  131.         if (isActive(view)) {
  132.           toLastView(visitedTags.value, view)
  133.         }
  134.       })
  135.     }
  137.     // 是否是始终固定在tagsview上的tag
  138.     const isAffix = (tag: RouteLocationWithFullPath) => {
  139.       return tag.meta && tag.meta.affix
  140.     }
  142.     return {
  143.       visitedTags,
  144.       isActive,
  145.       closeSelectedTag,
  146.       isAffix
  147.     }
  148.   }
  149. })
  150. </script>
  152. <style lang="scss" scoped>
  153. .tags-view-container {
  154.   height: 34px;
  155.   background: #fff;
  156.   border-bottom: 1px solid #d8dce5;
  157.   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  158.   overflow: hidden;
  159.   .tags-view-wrapper {
  160.     .tags-view-item {
  161.       display: inline-block;
  162.       height: 26px;
  163.       line-height: 26px;
  164.       border: 1px solid #d8dce5;
  165.       background: #fff;
  166.       color: #495060;
  167.       padding: 0 8px;
  168.       box-sizing: border-box;
  169.       font-size: 12px;
  170.       margin-left: 5px;
  171.       margin-top: 4px;
  172.       &:first-of-type {
  173.         margin-left: 15px;
  174.       }
  175.       &:last-of-type {
  176.         margin-right: 15px;
  177.       }
  178.       &.active {
  179.         background-color: #42b983;
  180.         color: #fff;
  181.         border-color: #42b983;
  182.         &::before {
  183.           position: relative;
  184.           display: inline-block;
  185.           content: '';
  186.           width: 8px;
  187.           height: 8px;
  188.           border-radius: 50%;
  189.           margin-right: 5px;
  190.           background: #fff;
  191.         }
  192.       }
  193.     }
  194.   }
  195. }
  196. </style>
  198. <style lang="scss">
  199. .tags-view-container {
  200.   .el-icon-close {
  201.     width: 16px;
  202.     height: 16px;
  203.     position: relative;
  204.     left: 2px;
  205.     border-radius: 50%;
  206.     text-align: center;
  207.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
  208.     transform-origin: 100% 50%;
  209.     &:before {
  210.       transform: scale(.6);
  211.       display: inline-block;
  212.       vertical-align: -1px;
  213.     }
  214.     &:hover {
  215.       background-color: #b4bccc;
  216.       color: #fff;
  217.     }
  218.   }
  219. }
  220. </style>

4-3 样式调整

image.png
src/layout/index.vue

  1. <template>
  2.   <div class="app-wrapper">
  3.     <div class="sidebar-container">
  4.       <Sidebar />
  5.     </div>
  6.     <div class="main-container">
  7.       <div class="header">
  8.         <navbar />
  9.         <tags-view />
  10.       </div>
  11.       <!-- AppMain router-view -->
  12.       <app-main />
  13.     </div>
  14.   </div>
  15. </template>
  17. <script lang="ts">
  18. import { defineComponent } from 'vue'
  19. import Sidebar from './components/Sidebar/index.vue'
  20. import AppMain from './components/AppMain.vue'
  21. import Navbar from './components/Navbar.vue'
  22. import TagsView from './components/TagsView/index.vue'
  24. export default defineComponent({
  25.   components: {
  26.     Sidebar,
  27.     AppMain,
  28.     Navbar,
  29.     TagsView
  30.   }
  31. })
  32. </script>
  34. <style lang="scss" scoped>
  35.   .app-wrapper {
  36.     display: flex;
  37.     width: 100%;
  38.     height: 100%;
  39.     .main-container {
  40.       flex: 1;
  41.       display: flex;
  42.       flex-direction: column;
  43.       overflow: hidden;
  44.       .app-main {
  45.         /* 50= navbar  50  如果有tagsview + 34  */
  46.         min-height: calc(100vh - 84px);
  47.       }
  48.     }
  49.   }
  50. </style>

4-4 注意使用标签导航

使用标签导航的路由 必须要name属性 因为方便我们根据 name进行路由筛选和缓存keep-alive

image.png

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/59741362e40d74bd4834f752ee61752d165b2e54