美文网首页
element-ui源码阅读-Tabs 标签页

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

作者: 写前端的大叔 | 来源:发表于2021-04-22 20:37 被阅读0次

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

1.tabs使用

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

 <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-paneel-barel-nav等子组件,在该组件的实现中,运用了一个平时不怎么常用的特性provide-inject,所以在看源代码前,有必要先了解下provideinject的基本用法。

provideinject 主要在开发高阶插件/组件库时使用。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

  • 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主要用于显示标签页的标题,主要有以下几个作用:

  • 用于展示当前标签页的标题,当整个标题的宽度超过容器的宽度时,可以滚动。并有向前和向上的按钮。
  • 点击标签页上的标题可以进行切换。
  • 高亮显示当前选中的标题。

其核心代码主要是在updatescrollToActiveTab方法中,其原理主要是计算出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());
  };

相关文章

网友评论

      本文标题:element-ui源码阅读-Tabs 标签页

      本文链接:https://www.haomeiwen.com/subject/xgnrkktx.html