大数据毕业设计之前端10：tab的关闭，让滑动块何去何从

前言

之前的两篇文章，一篇实现了tab页的新增，一个讲了如何实现滑动块，本篇就来讲一下如何实现tab的关闭，以及tab关闭时滑动块的变换情况。

关闭tab

关闭tab主要从两个方面实现：

1. 定义关闭tab方法
2. 触发滑动块位置的修改

绑定点击事件

tab主要分为两个部分，左边的名称和右边的关闭按钮，我们这里给关闭按钮绑定一个点击事件。

<Icon v-show="navTabs.state.tabsView.length > 1" class="close-icon"
      @click.stop="closeTab(item)" />

@就是v-on的缩写，click绑定了关闭函数closeTab，但是后面的 .stop是什么呢？

stop的作用是阻止事件冒泡，当我们在父元素中添加了一个click事件A，并且在其下的子元素中也添加了一个click事件B。这时我想点击子元素触发子元素的点击事件，但实际上会先触发子组件的A事件，然后触发父组件的B事件。

在这里B事件代表的就是：点击tab跳转页面事件。

从上图可以看到tab定义了一个@click事件，绑定了onTab。在之前只讲了tab的新增，没有讲tab跳转，就是留在这里讲。onTab其实就一行代码，调用router.push完成路由的跳转。

co