0 环境
1 参考文档
2 tabs 拖拽排序
如下图代码：
onMounted里的initTabs解释过了，现在就剩tabsDrop，它是用来标签来回拖拽的。
结合下图代码，看tabsDrop的实现，Sortablejs具体看上面提供的文档入口，选择器找到想要拖拽的那一列的上一层(.el-tabs__nav)，参考下面的截图，指定哪些元素可以被拖拽(el-tab-pane)，排序时的动画速度，onEnd 事件来获取排序后的结果，这里先获取标签数组，拿到拖拽前的标签的位置，以及将该拖拽的标签挪到新的位置，然后将tabsList重新赋值给this.tabsMenuList(this.tabsMenuList = tabsMenuList;)，或者说更新标签数组。
3 MoreButton按钮
MoreButton按钮的位置，看下图：
它在代码的位置，看下图。
el-dropdown是下拉菜单，点击生效，:teleported="false" 防止下拉菜单被其他元素遮挡。
进入正题，分析下图代码：
第3-5行代码，自定义下拉按钮的图标。第8-29行，就是按钮+文字，这里的重点就是click。
我们先看refresh的实现，代码如下图：
第一行呢，说它是一个注入函数，那它的提供者在哪里呢，看 src/layouts/components/Main/index.vue，如下图的代码，默认为true，控制的是tab标签下面的那块大的内容区域，大概盲猜是隐藏、显示组件的作用。再回来看setTimeout函数，它起到延迟执行代码，在下一个事件循环中执行。再往下，若isKeepAlive有缓存，移除缓存，refreshCurrentPage就是下面的代码，先隐藏，然后等刷新操作完成后，重新将当前路由的缓存名称添加到 keepAliveStore 中，并且显示标签栏下面的区域。
再往下maximize这里面的最大化也是在src/layouts/components/Main/index.vue里面的，相当于全局变量的一个控制。
再看如下图代码：
首先关闭当前页，先判断这个标签是不是固定死的，是不是不允许被删除，若是固定的，直接返回。否则直接移除。
再往下是关闭所有，结合下面closeMultipleTab的代码，item.path === tabsMenuValue，tabsMenuValue值不存在，那么就是假，或者 !item.close 等于 route.meta.isAffix，就是假如是这个标签是固定的话，就保留。并同步更新标签页的缓存状态。
**tabStore.closeMultipleTab(route.fullPath)**就和上面的一样。
在看关闭左侧和右侧，代码如下图：
这里就是获取当前标签的索引位置，若是关闭左侧，就是0到当前索引，否则就是当前后面一个索引，到这个标签数组长度的为结束。标签数组在过滤掉不需要的索引返回。在同步缓存。
总结
这里主要了解的是closeTabsOnSide和closeMultipleTab，也就是关闭左侧、右侧，和关闭全部、关闭其它，大致了解思路即可。
