通过右键选择 关闭所有、 关闭其他、 关闭当前、刷新 对于tag affix为true的固定tag是不允许关闭删除的

效果图
image.png
右键关闭所有

自动切换到dashboard因为它是固定tag

image.png
右键关闭其他

当前tag 以及 affix为true的tag是不能关闭，并且自动切换到当前右键的tag

image.png
关闭后
image.png
关闭当前右键选中tag

affix为true的tag是不能关闭的

image.png
关闭后
image.png
右键刷新
image.png
刷新后 input内容也没有了
image.png

2-1 修改tagsView组件

添加下拉菜单

需要使用 element dropdown组件，给每一个tag添加。

src/layout/components/TagsView/index.vue
image.png

添加右键事件

右键菜单关闭所有事件

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

修改store

我们的tag列表和缓存列表都在store 所有对于它们的增删改查需要 调用action mutaions来删除

image.png
src/store/modules/tagsView.ts

  1. import { Module, ActionTree, MutationTree } from 'vuex'
  2. import { RouteRecordRaw, RouteRecordNormalized, RouteRecordName } from 'vue-router'
  3. import { IRootState } from '@/store'
  5. // 携带fullPath
  6. export interface RouteLocationWithFullPath extends RouteRecordNormalized {
  7.   fullPath?: string;
  8. }
  9. export interface ITagsViewState {
  10.   // 存放当前显示的tags view集合
  11.   visitedViews: RouteLocationWithFullPath[];
  12.   // 根据路由name缓存集合
  13.   cachedViews: RouteRecordName[];
  14. }
  16. // 定义mutations
  17. const mutations: MutationTree<ITagsViewState> = {
  18.   // 添加可显示tags view
  19.   ADD_VISITED_VIEW(state, view) {
  20.     // 过滤去重
  21.     if (state.visitedViews.some(v => v.path === view.path)) return
  22.     // 没有titles时处理
  23.     state.visitedViews.push(Object.assign({}, view, {
  24.       title: view.meta.title || 'tag-name'
  25.     }))
  26.   },
  27.   // 如果路由meta.noCache没有 默认或为false代表进行缓存，为true不缓存
  28.   // 默认缓存所有路由
  29.   ADD_CACHED_VIEW(state, view) {
  30.     // 只有路由有name才可缓存集合keep-alive inludes使用
  31.     if (state.cachedViews.includes(view.name)) return
  32.     if (!view.meta.noCache) {
  33.       state.cachedViews.push(view.name)
  34.     }
  35.   },
  36.   DEL_VISITED_VIEW(state, view) {
  37.     const i = state.visitedViews.indexOf(view)
  38.     if (i > -1) {
  39.       state.visitedViews.splice(i, 1)
  40.     }
  41.   },
  42.   // 可删除指定的一个view缓存
  43.   DEL_CACHED_VIEW(state, view) {
  44.     const index = state.cachedViews.indexOf(view.name)
  45.     index > -1 && state.cachedViews.splice(index, 1)
  46.   },
  47.   // 清空可显示列表
  48.   DEL_ALL_VISITED_VIEWS(state) {
  49.     // 对于affix为true的路由 tag view 是不能删除的
  50.     const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
  51.     state.visitedViews = affixTags
  52.   },
  53.   // 清空缓存列表
  54.   DEL_ALL_CACHED_VIEWS(state) {
  55.     state.cachedViews = []
  56.   }
  57. }
  59. // 定义actions
  60. const actions: ActionTree<ITagsViewState, IRootState> = {
  61.   // 添加tags view
  62.   addView({ dispatch }, view: RouteRecordRaw) {
  63.     // 添加tag时也要判断该tag是否需要缓存
  64.     dispatch('addVisitedView', view)
  65.     dispatch('addCachedView', view)
  66.   },
  67.   // 添加可显示的tags view 添加前commit里需要进行去重过滤
  68.   addVisitedView({ commit }, view: RouteRecordRaw) {
  69.     commit('ADD_VISITED_VIEW', view)
  70.   },
  71.   // 添加可缓存的标签tag
  72.   addCachedView({ commit }, view: RouteRecordRaw) {
  73.     commit('ADD_CACHED_VIEW', view)
  74.   },
  75.   // 删除指定tags view
  76.   delView({ dispatch }, view: RouteRecordRaw) {
  77.     return new Promise(resolve => {
  78.       // 删除显示的路由tag
  79.       dispatch('delVisitedView', view)
  80.       // 删除缓存的路由
  81.       dispatch('delCachedView', view)
  82.       resolve(null)
  83.     })
  84.   },
  85.   // 从可显示的集合中 删除tags view
  86.   delVisitedView({ commit }, view: RouteRecordRaw) {
  87.     commit('DEL_VISITED_VIEW', view)
  88.   },
  89.   // 从缓存列表删除指定tag view
  90.   delCachedView({ commit }, view: RouteRecordRaw) {
  91.     return new Promise(resolve => {
  92.       commit('DEL_CACHED_VIEW', view)
  93.       resolve(null)
  94.     })
  95.   },
  96.   // 清空 可显示列表 和 缓存列表
  97.   delAllView({ dispatch }) {
  98.     return new Promise(resolve => {
  99.       // 删除显示的路由tag
  100.       dispatch('delAllVisitedView')
  101.       // 删除缓存的路由
  102.       dispatch('delAllCachedViews')
  103.       resolve(null)
  104.     })
  105.   },
  106.   // 清空可显示列表
  107.   delAllVisitedView({ commit }) {
  108.     commit('DEL_ALL_VISITED_VIEWS')
  109.   },
  110.   // 清空缓存列表
  111.   delAllCachedViews({ commit }) {
  112.     commit('DEL_ALL_CACHED_VIEWS')
  113.   }
  114. }
  116. const tagsView: Module<ITagsViewState, IRootState> = {
  117.   namespaced: true,
  118.   state: {
  119.     visitedViews: [],
  120.     cachedViews: []
  121.   },
  122.   mutations,
  123.   actions
  124. }
  126. export default tagsView

2-2 右键关闭其他和关闭

右键关闭其他 除了 affix tag 和 当前右键tag 右键关闭 是处理affix tag下拉菜单不会显示此项

修改tagsview

src/layout/components/TagsView/index.vue
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.             <el-dropdown
  16.               trigger="contextmenu"
  17.               @command="command => handleTagCommand(command, tag)">
  18.               <span>
  19.                 {{ tag.meta.title }}
  20.                 <!-- affix固定的路由tag是无法删除 -->
  21.                 <span
  22.                   v-if="!isAffix(tag)"
  23.                   class="el-icon-close"
  24.                   @click.prevent.stop="closeSelectedTag(tag)"
  25.                 ></span>
  26.               </span>
  27.               <template #dropdown>
  28.                 <el-dropdown-menu>
  29.                   <el-dropdown-item command="all">关闭所有</el-dropdown-item>
  30.                   <el-dropdown-item command="other">关闭其他</el-dropdown-item>
  31.                   <el-dropdown-item command="self" v-if="!tag.meta || !tag.meta.affix">关闭</el-dropdown-item>
  32.                 </el-dropdown-menu>
  33.               </template>
  34.             </el-dropdown>
  35.           </router-link>
  36.       </div>
  37.     </scroll-panel>
  38.   </div>
  39. </template>
  41. <script lang="ts">
  42. import path from 'path'
  43. import { defineComponent, computed, watch, onMounted } from 'vue'
  44. import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
  45. import { useStore } from '@/store'
  46. import { RouteLocationWithFullPath } from '@/store/modules/tagsView'
  47. import { routes } from '@/router'
  48. import ScrollPanel from './ScrollPanel.vue'
  50. // 右键菜单
  51. enum TagCommandType {
  52.   All = 'all',
  53.   Other = 'other',
  54.   Self = 'self',
  55. }
  57. export default defineComponent({
  58.   name: 'TagsView',
  59.   components: {
  60.     ScrollPanel
  61.   },
  62.   setup() {
  63.     const store = useStore()
  64.     const router = useRouter()
  65.     const route = useRoute()
  66.     // 可显示的tags view
  67.     const visitedTags = computed(() => store.state.tagsView.visitedViews)
  68.     // 从路由表中过滤出要affixed tagviews
  69.     const fillterAffixTags = (routes: Array<RouteLocationWithFullPath | RouteRecordRaw>, basePath = '/') => {
  70.       let tags: RouteLocationWithFullPath[] = []
  71.       routes.forEach(route => {
  72.         if (route.meta && route.meta.affix) {
  73.           // 把路由路径解析成完整路径，路由可能是相对路径
  74.           const tagPath = path.resolve(basePath, route.path)
  75.           tags.push({
  76.             name: route.name,
  77.             path: tagPath,
  78.             fullPath: tagPath,
  79.             meta: { ...route.meta }
  80.           } as RouteLocationWithFullPath)
  81.         }
  83.         // 深度优先遍历 子路由（子路由路径可能相对于route.path父路由路径）
  84.         if (route.children) {
  85.           const childTags = fillterAffixTags(route.children, route.path)
  86.           if (childTags.length) {
  87.             tags = [...tags, ...childTags]
  88.           }
  89.         }
  90.       })
  91.       return tags
  92.     }
  94.     // 初始添加affix的tag
  95.     const initTags = () => {
  96.       const affixTags = fillterAffixTags(routes)
  97.       for (const tag of affixTags) {
  98.         if (tag.name) {
  99.           store.dispatch('tagsView/addVisitedView', tag)
  100.         }
  101.       }
  102.     }
  104.     // 添加tag
  105.     const addTags = () => {
  106.       const { name } = route
  107.       if (name) {
  108.         store.dispatch('tagsView/addView', route)
  109.       }
  110.     }
  112.     // 路径发生变化追加tags view
  113.     watch(() => route.path, () => {
  114.       addTags()
  115.     })
  117.     // 最近当前router到tags view
  118.     onMounted(() => {
  119.       initTags()
  120.       addTags()
  121.     })
  123.     // 当前是否是激活的tag
  124.     const isActive = (tag: RouteRecordRaw) => {
  125.       return tag.path === route.path
  126.     }
  128.     // 让删除后tags view集合中最后一个为选中状态
  129.     const toLastView = (visitedViews: RouteLocationWithFullPath[], view: RouteLocationWithFullPath) => {
  130.       // 得到集合中最后一个项tag view 可能没有
  131.       const lastView = visitedViews[visitedViews.length - 1]
  132.       if (lastView) {
  133.         router.push(lastView.fullPath as string)
  134.       } else { // 集合中都没有tag view时
  135.         // 如果刚刚删除的正是Dashboard 就重定向回Dashboard（首页）
  136.         if (view.name === 'Dashboard') {
  137.           router.replace({ path: '/redirect' + view.fullPath as string })
  138.         } else {
  139.           // tag都没有了 删除的也不是Dashboard 只能跳转首页
  140.           router.push('/')
  141.         }
  142.       }
  143.     }
  145.     // 关闭当前右键的tag路由
  146.     const closeSelectedTag = (view: RouteLocationWithFullPath) => {
  147.       // 关掉并移除view
  148.       store.dispatch('tagsView/delView', view).then(() => {
  149.         // 如果移除的view是当前选中状态view, 就让删除后的集合中最后一个tag view为选中态
  150.         if (isActive(view)) {
  151.           toLastView(visitedTags.value, view)
  152.         }
  153.       })
  154.     }
  156.     // 是否是始终固定在tagsview上的tag
  157.     const isAffix = (tag: RouteLocationWithFullPath) => {
  158.       return tag.meta && tag.meta.affix
  159.     }
  161.     // 右键菜单
  162.     const handleTagCommand = (command: TagCommandType, view: RouteLocationWithFullPath) => {
  163.       switch (command) {
  164.         case TagCommandType.All: // 右键删除标签导航所有tag 除了affix为true的
  165.           handleCloseAllTag(view)
  166.           break
  167.         case TagCommandType.Other: // 关闭其他tag 除了affix为true的和当前右键的tag
  168.           handleCloseOtherTag(view)
  169.           break
  170.         case TagCommandType.Self: // 关闭当前右键的tag affix为true的tag下拉菜单中无此项
  171.           closeSelectedTag(view)
  172.       }
  173.     }
  175.     // 删除所有tag 除了affix为true的
  176.     const handleCloseAllTag = (view: RouteLocationWithFullPath) => {
  177.       // 对于是affix的tag是不会被删除的
  178.       store.dispatch('tagsView/delAllView').then(() => {
  179.         // 关闭所有后 就让切换到剩下affix中最后一个tag
  180.         toLastView(visitedTags.value, view)
  181.       })
  182.     }
  184.     // 删除其他tag 除了当前右键的tag
  185.     const handleCloseOtherTag = (view: RouteLocationWithFullPath) => {
  186.       store.dispatch('tagsView/delOthersViews', view).then(() => {
  187.         if (!isActive(view)) { // 删除其他tag后 让该view路由激活
  188.           router.push(view.path)
  189.         }
  190.       })
  191.     }
  193.     return {
  194.       visitedTags,
  195.       isActive,
  196.       closeSelectedTag,
  197.       isAffix,
  198.       handleTagCommand
  199.     }
  200.   }
  201. })
  202. </script>
  204. <style lang="scss" scoped>
  205. .tags-view-container {
  206.   height: 34px;
  207.   background: #fff;
  208.   border-bottom: 1px solid #d8dce5;
  209.   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  210.   overflow: hidden;
  211.   .tags-view-wrapper {
  212.     .tags-view-item {
  213.       display: inline-block;
  214.       height: 26px;
  215.       line-height: 26px;
  216.       border: 1px solid #d8dce5;
  217.       background: #fff;
  218.       color: #495060;
  219.       padding: 0 8px;
  220.       box-sizing: border-box;
  221.       font-size: 12px;
  222.       margin-left: 5px;
  223.       margin-top: 4px;
  224.       &:first-of-type {
  225.         margin-left: 15px;
  226.       }
  227.       &:last-of-type {
  228.         margin-right: 15px;
  229.       }
  230.       &.active {
  231.         background-color: #42b983;
  232.         color: #fff;
  233.         border-color: #42b983;
  234.         ::v-deep {
  235.           .el-dropdown {
  236.             color: #fff;
  237.           }
  238.         }
  239.         &::before {
  240.           position: relative;
  241.           display: inline-block;
  242.           content: '';
  243.           width: 8px;
  244.           height: 8px;
  245.           border-radius: 50%;
  246.           margin-right: 5px;
  247.           background: #fff;
  248.         }
  249.       }
  250.     }
  251.   }
  252. }
  253. </style>
  255. <style lang="scss">
  256. .tags-view-container {
  257.   .el-icon-close {
  258.     width: 16px;
  259.     height: 16px;
  260.     vertical-align: 2px;
  261.     border-radius: 50%;
  262.     text-align: center;
  263.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
  264.     transform-origin: 100% 50%;
  265.     &:before {
  266.       transform: scale(.6);
  267.       display: inline-block;
  268.       vertical-align: -3px;
  269.     }
  270.     &:hover {
  271.       background-color: #b4bccc;
  272.       color: #fff;
  273.     }
  274.   }
  275. }
  277. </style>

store里添加相关action和mutation

image.png
src/store/modules/tagsView.ts

  1. import { Module, ActionTree, MutationTree } from 'vuex'
  2. import { RouteRecordRaw, RouteRecordNormalized, RouteRecordName } from 'vue-router'
  3. import { IRootState } from '@/store'
  5. // 携带fullPath
  6. export interface RouteLocationWithFullPath extends RouteRecordNormalized {
  7.   fullPath?: string;
  8. }
  9. export interface ITagsViewState {
  10.   // 存放当前显示的tags view集合
  11.   visitedViews: RouteLocationWithFullPath[];
  12.   // 根据路由name缓存集合
  13.   cachedViews: RouteRecordName[];
  14. }
  16. // 定义mutations
  17. const mutations: MutationTree<ITagsViewState> = {
  18.   // 添加可显示tags view
  19.   ADD_VISITED_VIEW(state, view) {
  20.     // 过滤去重
  21.     if (state.visitedViews.some(v => v.path === view.path)) return
  22.     // 没有titles时处理
  23.     state.visitedViews.push(Object.assign({}, view, {
  24.       title: view.meta.title || 'tag-name'
  25.     }))
  26.   },
  27.   // 如果路由meta.noCache没有 默认或为false代表进行缓存，为true不缓存
  28.   // 默认缓存所有路由
  29.   ADD_CACHED_VIEW(state, view) {
  30.     // 只有路由有name才可缓存集合keep-alive inludes使用
  31.     if (state.cachedViews.includes(view.name)) return
  32.     if (!view.meta.noCache) {
  33.       state.cachedViews.push(view.name)
  34.     }
  35.   },
  36.   DEL_VISITED_VIEW(state, view) {
  37.     const i = state.visitedViews.indexOf(view)
  38.     if (i > -1) {
  39.       state.visitedViews.splice(i, 1)
  40.     }
  41.   },
  42.   // 可删除指定的一个view缓存
  43.   DEL_CACHED_VIEW(state, view) {
  44.     const index = state.cachedViews.indexOf(view.name)
  45.     index > -1 && state.cachedViews.splice(index, 1)
  46.   },
  47.   // 清空可显示列表
  48.   DEL_ALL_VISITED_VIEWS(state) {
  49.     // 对于affix为true的路由 tag view 是不能删除的
  50.     const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
  51.     state.visitedViews = affixTags
  52.   },
  53.   // 清空缓存列表
  54.   DEL_ALL_CACHED_VIEWS(state) {
  55.     state.cachedViews = []
  56.   },
  57.   // 删除标签导航其他可显示tag 除了 affix为true 以及当前右键选中的view
  58.   DEL_OTHERS_VISITED_VIEWS(state, view: RouteRecordRaw) {
  59.     state.visitedViews = state.visitedViews.filter(tag => tag.meta.affix || (tag.path === view.path))
  60.   },
  61.   // 删除缓存列表里其他tag 除了当前右键选中的view
  62.   DEL_OTHERS_CACHED_VIEWS(state, view: RouteRecordRaw) {
  63.     state.cachedViews = state.cachedViews.filter(name => name !== view.name)
  64.   }
  65. }
  67. // 定义actions
  68. const actions: ActionTree<ITagsViewState, IRootState> = {
  69.   // 添加tags view
  70.   addView({ dispatch }, view: RouteRecordRaw) {
  71.     // 添加tag时也要判断该tag是否需要缓存
  72.     dispatch('addVisitedView', view)
  73.     dispatch('addCachedView', view)
  74.   },
  75.   // 添加可显示的tags view 添加前commit里需要进行去重过滤
  76.   addVisitedView({ commit }, view: RouteRecordRaw) {
  77.     commit('ADD_VISITED_VIEW', view)
  78.   },
  79.   // 添加可缓存的标签tag
  80.   addCachedView({ commit }, view: RouteRecordRaw) {
  81.     commit('ADD_CACHED_VIEW', view)
  82.   },
  83.   // 删除指定tags view
  84.   delView({ dispatch }, view: RouteRecordRaw) {
  85.     return new Promise(resolve => {
  86.       // 删除显示的路由tag
  87.       dispatch('delVisitedView', view)
  88.       // 删除缓存的路由
  89.       dispatch('delCachedView', view)
  90.       resolve(null)
  91.     })
  92.   },
  93.   // 从可显示的集合中 删除tags view
  94.   delVisitedView({ commit }, view: RouteRecordRaw) {
  95.     commit('DEL_VISITED_VIEW', view)
  96.   },
  97.   // 从缓存列表删除指定tag view
  98.   delCachedView({ commit }, view: RouteRecordRaw) {
  99.     return new Promise(resolve => {
  100.       commit('DEL_CACHED_VIEW', view)
  101.       resolve(null)
  102.     })
  103.   },
  104.   // 清空 可显示列表 和 缓存列表
  105.   delAllView({ dispatch }) {
  106.     return new Promise(resolve => {
  107.       // 删除显示的路由tag
  108.       dispatch('delAllVisitedView')
  109.       // 删除缓存的路由
  110.       dispatch('delAllCachedViews')
  111.       resolve(null)
  112.     })
  113.   },
  114.   // 清空可显示列表
  115.   delAllVisitedView({ commit }) {
  116.     commit('DEL_ALL_VISITED_VIEWS')
  117.   },
  118.   // 清空缓存列表
  119.   delAllCachedViews({ commit }) {
  120.     commit('DEL_ALL_CACHED_VIEWS')
  121.   },
  122.   // 关闭其他tag
  123.   delOthersViews({ dispatch }, view: RouteRecordRaw) {
  124.     dispatch('delOthersVisitedViews', view)
  125.     dispatch('delOthersCachedViews', view)
  126.   },
  127.   // 关闭其他可显示tag
  128.   delOthersVisitedViews({ commit }, view: RouteRecordRaw) {
  129.     commit('DEL_OTHERS_VISITED_VIEWS', view)
  130.   },
  131.   // 关闭其他缓存tag
  132.   delOthersCachedViews({ commit }, view: RouteRecordRaw) {
  133.     commit('DEL_OTHERS_CACHED_VIEWS', view)
  134.   }
  135. }
  137. const tagsView: Module<ITagsViewState, IRootState> = {
  138.   namespaced: true,
  139.   state: {
  140.     visitedViews: [],
  141.     cachedViews: []
  142.   },
  143.   mutations,
  144.   actions
  145. }
  147. export default tagsView

2-3 右键刷新

image.png
image.png

  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.             <el-dropdown
  16.               trigger="contextmenu"
  17.               @command="command => handleTagCommand(command, tag)">
  18.               <span>
  19.                 {{ tag.meta.title }}
  20.                 <!-- affix固定的路由tag是无法删除 -->
  21.                 <span
  22.                   v-if="!isAffix(tag)"
  23.                   class="el-icon-close"
  24.                   @click.prevent.stop="closeSelectedTag(tag)"
  25.                 ></span>
  26.               </span>
  27.               <template #dropdown>
  28.                 <el-dropdown-menu>
  29.                   <el-dropdown-item command="refresh">刷新</el-dropdown-item>
  30.                   <el-dropdown-item command="all">关闭所有</el-dropdown-item>
  31.                   <el-dropdown-item command="other">关闭其他</el-dropdown-item>
  32.                   <el-dropdown-item command="self" v-if="!tag.meta || !tag.meta.affix">关闭</el-dropdown-item>
  33.                 </el-dropdown-menu>
  34.               </template>
  35.             </el-dropdown>
  36.           </router-link>
  37.       </div>
  38.     </scroll-panel>
  39.   </div>
  40. </template>
  42. <script lang="ts">
  43. import path from 'path'
  44. import { defineComponent, computed, watch, onMounted, nextTick } from 'vue'
  45. import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
  46. import { useStore } from '@/store'
  47. import { RouteLocationWithFullPath } from '@/store/modules/tagsView'
  48. import { routes } from '@/router'
  49. import ScrollPanel from './ScrollPanel.vue'
  51. // 右键菜单
  52. enum TagCommandType {
  53.   All = 'all',
  54.   Other = 'other',
  55.   Self = 'self',
  56.   Refresh = 'refresh'
  57. }
  59. export default defineComponent({
  60.   name: 'TagsView',
  61.   components: {
  62.     ScrollPanel
  63.   },
  64.   setup() {
  65.     const store = useStore()
  66.     const router = useRouter()
  67.     const route = useRoute()
  68.     // 可显示的tags view
  69.     const visitedTags = computed(() => store.state.tagsView.visitedViews)
  70.     // 从路由表中过滤出要affixed tagviews
  71.     const fillterAffixTags = (routes: Array<RouteLocationWithFullPath | RouteRecordRaw>, basePath = '/') => {
  72.       let tags: RouteLocationWithFullPath[] = []
  73.       routes.forEach(route => {
  74.         if (route.meta && route.meta.affix) {
  75.           // 把路由路径解析成完整路径，路由可能是相对路径
  76.           const tagPath = path.resolve(basePath, route.path)
  77.           tags.push({
  78.             name: route.name,
  79.             path: tagPath,
  80.             fullPath: tagPath,
  81.             meta: { ...route.meta }
  82.           } as RouteLocationWithFullPath)
  83.         }
  85.         // 深度优先遍历 子路由（子路由路径可能相对于route.path父路由路径）
  86.         if (route.children) {
  87.           const childTags = fillterAffixTags(route.children, route.path)
  88.           if (childTags.length) {
  89.             tags = [...tags, ...childTags]
  90.           }
  91.         }
  92.       })
  93.       return tags
  94.     }
  96.     // 初始添加affix的tag
  97.     const initTags = () => {
  98.       const affixTags = fillterAffixTags(routes)
  99.       for (const tag of affixTags) {
  100.         if (tag.name) {
  101.           store.dispatch('tagsView/addVisitedView', tag)
  102.         }
  103.       }
  104.     }
  106.     // 添加tag
  107.     const addTags = () => {
  108.       const { name } = route
  109.       if (name) {
  110.         store.dispatch('tagsView/addView', route)
  111.       }
  112.     }
  114.     // 路径发生变化追加tags view
  115.     watch(() => route.path, () => {
  116.       addTags()
  117.     })
  119.     // 最近当前router到tags view
  120.     onMounted(() => {
  121.       initTags()
  122.       addTags()
  123.     })
  125.     // 当前是否是激活的tag
  126.     const isActive = (tag: RouteRecordRaw) => {
  127.       return tag.path === route.path
  128.     }
  130.     // 让删除后tags view集合中最后一个为选中状态
  131.     const toLastView = (visitedViews: RouteLocationWithFullPath[], view: RouteLocationWithFullPath) => {
  132.       // 得到集合中最后一个项tag view 可能没有
  133.       const lastView = visitedViews[visitedViews.length - 1]
  134.       if (lastView) {
  135.         router.push(lastView.fullPath as string)
  136.       } else { // 集合中都没有tag view时
  137.         // 如果刚刚删除的正是Dashboard 就重定向回Dashboard（首页）
  138.         if (view.name === 'Dashboard') {
  139.           router.replace({ path: '/redirect' + view.fullPath as string })
  140.         } else {
  141.           // tag都没有了 删除的也不是Dashboard 只能跳转首页
  142.           router.push('/')
  143.         }
  144.       }
  145.     }
  147.     // 关闭当前右键的tag路由
  148.     const closeSelectedTag = (view: RouteLocationWithFullPath) => {
  149.       // 关掉并移除view
  150.       store.dispatch('tagsView/delView', view).then(() => {
  151.         // 如果移除的view是当前选中状态view, 就让删除后的集合中最后一个tag view为选中态
  152.         if (isActive(view)) {
  153.           toLastView(visitedTags.value, view)
  154.         }
  155.       })
  156.     }
  158.     // 是否是始终固定在tagsview上的tag
  159.     const isAffix = (tag: RouteLocationWithFullPath) => {
  160.       return tag.meta && tag.meta.affix
  161.     }
  163.     // 右键菜单
  164.     const handleTagCommand = (command: TagCommandType, view: RouteLocationWithFullPath) => {
  165.       switch (command) {
  166.         case TagCommandType.All: // 右键删除标签导航所有tag 除了affix为true的
  167.           handleCloseAllTag(view)
  168.           break
  169.         case TagCommandType.Other: // 关闭其他tag 除了affix为true的和当前右键的tag
  170.           handleCloseOtherTag(view)
  171.           break
  172.         case TagCommandType.Self: // 关闭当前右键的tag affix为true的tag下拉菜单中无此项
  173.           closeSelectedTag(view)
  174.           break
  175.         case TagCommandType.Refresh: // 刷新当前右键选中tag对应的路由
  176.           refreshSelectedTag(view)
  177.       }
  178.     }
  180.     // 删除所有tag 除了affix为true的
  181.     const handleCloseAllTag = (view: RouteLocationWithFullPath) => {
  182.       // 对于是affix的tag是不会被删除的
  183.       store.dispatch('tagsView/delAllView').then(() => {
  184.         // 关闭所有后 就让切换到剩下affix中最后一个tag
  185.         toLastView(visitedTags.value, view)
  186.       })
  187.     }
  189.     // 删除其他tag 除了当前右键的tag
  190.     const handleCloseOtherTag = (view: RouteLocationWithFullPath) => {
  191.       store.dispatch('tagsView/delOthersViews', view).then(() => {
  192.         if (!isActive(view)) { // 删除其他tag后 让该view路由激活
  193.           router.push(view.path)
  194.         }
  195.       })
  196.     }
  198.     // 右键刷新 清空当前对应路由缓存
  199.     const refreshSelectedTag = (view: RouteLocationWithFullPath) => {
  200.       // 刷新前 将该路由名称从缓存列表中移除
  201.       store.dispatch('tagsView/delCachedView', view).then(() => {
  202.         const { fullPath } = view
  203.         nextTick(() => {
  204.           router.replace('/redirect' + fullPath)
  205.         })
  206.       })
  207.     }
  209.     return {
  210.       visitedTags,
  211.       isActive,
  212.       closeSelectedTag,
  213.       isAffix,
  214.       handleTagCommand
  215.     }
  216.   }
  217. })
  218. </script>
  220. <style lang="scss" scoped>
  221. .tags-view-container {
  222.   height: 34px;
  223.   background: #fff;
  224.   border-bottom: 1px solid #d8dce5;
  225.   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  226.   overflow: hidden;
  227.   .tags-view-wrapper {
  228.     .tags-view-item {
  229.       display: inline-block;
  230.       height: 26px;
  231.       line-height: 26px;
  232.       border: 1px solid #d8dce5;
  233.       background: #fff;
  234.       color: #495060;
  235.       padding: 0 8px;
  236.       box-sizing: border-box;
  237.       font-size: 12px;
  238.       margin-left: 5px;
  239.       margin-top: 4px;
  240.       &:first-of-type {
  241.         margin-left: 15px;
  242.       }
  243.       &:last-of-type {
  244.         margin-right: 15px;
  245.       }
  246.       &.active {
  247.         background-color: #42b983;
  248.         color: #fff;
  249.         border-color: #42b983;
  250.         ::v-deep {
  251.           .el-dropdown {
  252.             color: #fff;
  253.           }
  254.         }
  255.         &::before {
  256.           position: relative;
  257.           display: inline-block;
  258.           content: '';
  259.           width: 8px;
  260.           height: 8px;
  261.           border-radius: 50%;
  262.           margin-right: 5px;
  263.           background: #fff;
  264.         }
  265.       }
  266.     }
  267.   }
  268. }
  269. </style>
  271. <style lang="scss">
  272. .tags-view-container {
  273.   .el-icon-close {
  274.     width: 16px;
  275.     height: 16px;
  276.     vertical-align: 2px;
  277.     border-radius: 50%;
  278.     text-align: center;
  279.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
  280.     transform-origin: 100% 50%;
  281.     &:before {
  282.       transform: scale(.6);
  283.       display: inline-block;
  284.       vertical-align: -3px;
  285.     }
  286.     &:hover {
  287.       background-color: #b4bccc;
  288.       color: #fff;
  289.     }
  290.   }
  291. }
  293. </style>

参考本节源码

右键关闭所有
https://gitee.com/brolly/vue3-element-admin/commit/293d91875e315cec0b489421f1404e05d77f8a70
右键关闭其他
https://gitee.com/brolly/vue3-element-admin/commit/2246c3d9e7d7b56d4ad8959e45f177652a6f3cce
右键刷新
https://gitee.com/brolly/vue3-element-admin/commit/c8c1d110074238f25946a028b694494e7109c2a7