我攻克的技术难题 - BuildAdmin15：一键关闭所有tab，vue是如何做到的

原创

叫我阿柒啊

修改于 2024-02-17 07:49:31

2640

修改于 2024-02-17 07:49:31

文章被收录于专栏：入门到放弃之路入门到放弃之路

前言

上一篇写了 关闭当前标签 的功能实现，其中涉及了很多之前写过的知识点。今天就来看看关闭其他标签，关闭全部标签两个标签功能的实现，是否和关闭当前标签有什么关联。

case 'closeOther':
    closeOtherTab(menu)
    break
case 'closeAll':
    closeAllTab(menu)
    break

关闭其他标签

BuildAdmin中定义了closeOtherTab，用来关闭其他标签。在之前tabs的实现中曾经讲到，讲过tabs的渲染是通过v-for遍历tabsViews实现的。

那么关闭其他标签的实现思路就是：遍历navTabs中的tabsViews，通过filter只留下选中tab对应的menu路由即可 。这里我们先看closeOtherTab是如何定义的。

const closeOtherTab = (menu: RouteLocationNormalized) => {
    navTabs.closeTabs(menu)
    if (navTabs.state.activeRoute?.path !== menu.path) {
        router.push(menu)
    }
    navTabs.setActiveRoute(menu)
}

closeTabs

首先调用了navTabs状态中closeTabs方法，我们去navTabs.ts去看看代码逻辑。

之前关闭按钮和弹出框关闭tab的两种方式，都是调用了closeTab，在实现关闭其他标签页时，重新定义了closeTabs方法。

const closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
    if (retainMenu) {
        state.tabsView = [retainMenu]
    } else {
        state.tabsView = []
    }
}

参数retainMenu是需要保留的标签或者false。当传入一个menu时，tabsView会被初始化为只包含此menu的list，即关闭了其他所有的标签。当传入的是false，tabsView被初始化为空list，即关闭了所有的标签。

所以，closeTabs方法同时实现了关闭其他、关闭所有标签的两个功能，接着回到closeOtherTab，看看后面的实现。

滑动块

在关闭其他tab有两种情况：

关闭的tab是当前激活的，即滑动块所在的，路由不变。

关闭的tab是非激活的。

第一种情况，我们只需要考虑滑动块的位置改变即可。第二种情况，除了考虑滑动块位置的改变，还要跳转到选中tab的那个页面，即路由跳转。那么，滑动块的位置是如何改变的？

在之前滑动块的滑动实现中，我们定义了selectNavTab方法，当activeRoute改变时，就会调用此方法.

所以我们只需要修改activeRoute即可。对于tab是否为激活的判断，只需要将activeRoute和menu对比即可。所以closeOtherTab最后几行代码就实现了上面的两个功能点.

if (navTabs.state.activeRoute?.path !== menu.path) {
    router.push(menu)
}
navTabs.setActiveRoute(menu)

这样，就实现了关闭其他标签。

关闭所有标签

关闭所有标签的设计思路为：关闭tabs栏中所有的tab，然后打开应用的第一个tab（即firstRoute，控制台）。所以，这里也会出现两种情况：

在控制台的tab上，选择关闭所有标签。

在非控制台的tab上，选择选择关闭所有标签。

第一种情况，其实直接关闭除了控制台之外的其他标签就行了，没有必要关闭了所有tab之后再创建一个控制台的tab，所以这种情况下问题就转变成了在控制台tab上关闭其他标签。

第二种情况，就是之前提及的设计思路。在BuildAdmin中，定义了closeAllTab方法来关闭所有标签。

const closeAllTab = (menu: RouteLocationNormalized) => {
    const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
    // 第一种情况
    if (firstRoute && firstRoute.path == menu.path) {
        return closeOtherTab(menu)
    }
    // 第二种情况
    navTabs.closeTabs(false)
    if (firstRoute) router.push(firstRoute.path)
}

首先获取firstRoute来判断当前激活的tab是不是控制台，如果是，直接调用closeOtherTab关闭除控制台之外的tab。如果不是，则调用navTabs.closeTabs并传入false。

在上面关闭其他标签中讲过，传入false，tabsView被初始化为空的list。意味着tabs栏中将没有tab，这时候路由再跳转到firstRoute，打开控制台的tab。这样就实现了关闭所有标签的功能。