Tabs 标签页在平时的开发中经常会碰到，主要用于分隔内容上有关联但属于不同类别的数据集合。在中后台项目中经常用到，比如点击菜单栏上的菜单或导航按钮时，可以动态添加tab，并且可以切换不同的tab。下面就来看看Tabs是怎么实现的。
1.tabs使用
在研究源码前，先看下tabs是如何使用的，一个标签栏主要由el-tabs和el-tab-pane两个组件组成，绑定一个变量用于设置显示的tab，变量的值对应于el-tab-pane的name属性，如下所示为官网提供的例子。
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
2. el-tabs
el-tabs是一个容器组件，用于装载el-tab-pane、el-bar、el-nav等子组件，在该组件的实现中，运用了一个平时不怎么常用的特性provide-inject，所以在看源代码前，有必要先了解下provide和inject的基本用法。
provide和inject主要在开发高阶插件/组件库时使用。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
- provide：该选项是一个对象或返回一个对象的函数。该对象包含可注入其子孙的
property。- inject：该选项是一个字符串数组，或者是一个对象，对象的
key是本地的绑定名。
在el-tabs中定义了一个provide，用于向子组件传递一个rootTabs，并指向当前对象，如下所示：
provide() {
return {
rootTabs: this
};
},
根组件创建好provide后，需要在子组件中创建inject。
inject: ['rootTabs'],
设置好provide和inject后，就可以在子组件中使用this.rootTabs`就可以访问父组件中的属性和方法了。但有人看到这种访问时，会提出下面的疑问
访问父组件中的属性和方法为什么不直接使用
$parent调用?
像这里，el-tab-nav只是el-tab的子组件，使用$parent确实方便，假设层级关系比较深时，就比较麻烦了，假设有这么一个层级关系，A->B->C->D,当D要访问A中的属性时，可以这么写this.$parent.$parent.$parent.xxx，这样的话一眼就能看出两个问题，第一是这代码不够友好，如果层级太深，会出现很多的$parent，第二是不易于维护，假设突然某一层不需要了，得查找相关的代码来删除$parent。所以涉及到太多组件或者层级太深时，能用注入的方式就用provide。
tabs.vue文件中的代码读起来还是比较简单，主要要通过函数式组件来创建一个容器，在容器中加入el-tab-nav组件，其核心代码主要是calcPaneInstances方法，用于控制显示当前tab的内容。
calcPaneInstances(isForceUpdate = false) {
// 获取所有没有具名的插槽，先判断是否为空
if (this.$slots.default) {
// 在插槽列表中找出组件名为ElTabPane的子组件,这里只是获取到vnode对象
const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
// 根据vnode的componentInstance，获取到组件对象
const panes = paneSlots.map(({ componentInstance }) => componentInstance);
// 当长度变化或者位置变化时就要更新panes
const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
if (isForceUpdate || panesChanged) {
this.panes = panes;
}
} else if (this.panes.length !== 0) {
this.panes = [];
}
},
3. el-tab-nav
tab-nav主要用于显示标签页的标题，主要有以下几个作用：
- 用于展示当前标签页的标题，当整个标题的宽度超过容器的宽度时，可以滚动。并有向前和向上的按钮。
- 点击标签页上的标题可以进行切换。
- 高亮显示当前选中的标题。
其核心代码主要是在update和scrollToActiveTab方法中，其原理主要是计算出navOffset的值，然后再更新样式，如下所示：
scrollToActiveTab() {
if (!this.scrollable) return;
const nav = this.$refs.nav;
const activeTab = this.$el.querySelector('.is-active');
if (!activeTab) return;
const navScroll = this.$refs.navScroll;
const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;
// 返回元素的大小及其相对于视口的位置
const activeTabBounding = activeTab.getBoundingClientRect();
const navScrollBounding = navScroll.getBoundingClientRect();
// 计算出最大的偏移值
const maxOffset = isHorizontal
? nav.offsetWidth - navScrollBounding.width
: nav.offsetHeight - navScrollBounding.height;
const currentOffset = this.navOffset;
let newOffset = currentOffset;
// 计算偏移量
if (isHorizontal) {
if (activeTabBounding.left < navScrollBounding.left) {
newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
}
} else {
if (activeTabBounding.top < navScrollBounding.top) {
newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
}
if (activeTabBounding.bottom > navScrollBounding.bottom) {
newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
}
}
newOffset = Math.max(newOffset, 0);
this.navOffset = Math.min(newOffset, maxOffset);
},
navStyle() {
const dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';
return {
transform: `translate${dir}(-${this.navOffset}px)`
};
},
在tab-nav.vue文件中看到一个比较实用的函数：
首字母转大写
const firstUpperCase = str => {
return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
};
