element-ui源码阅读-Tabs 标签页

Tabs 标签页在平时的开发中经常会碰到，主要用于分隔内容上有关联但属于不同类别的数据集合。在中后台项目中经常用到，比如点击菜单栏上的菜单或导航按钮时，可以动态添加tab，并且可以切换不同的tab。下面就来看看Tabs是怎么实现的。

1.tabs使用

在研究源码前，先看下tabs是如何使用的，一个标签栏主要由el-tabs和el-tab-pane两个组件组成，绑定一个变量用于设置显示的tab，变量的值对应于el-tab-pane的name属性，如下所示为官网提供的例子。

 
    用户管理
    配置管理
    角色管理
    定时任务补偿
  

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());
  };