关于javascript:为ElementUI的标签页添加生命周期

在现有ElementUI下，子组件是不晓得本人所属的标签页是否处于开启状态的。
上面写一个Vue的指令让子组件晓得

实现

请看逐行正文。

 type TabPaneChildren = {
    elPaneActivated?: () => unknown;
    $children: TabPaneChildren[];
  };

  /**
   * 调用所有子孙组件的 elPaneActivated办法
   *
   */
  function callOnShow(instances: TabPaneChildren[]) {
    //遍历子组件
    instances.forEach((ins) => {
        //如果以后组件有elPaneActivated办法，则调用。
      ins.elPaneActivated && ins.elPaneActivated();
       //对以后组件的子组件递归调用callOnShow。
      if (ins.$children.length > 0) {
        callOnShow(ins.$children);
      }
    });
  }

  Vue.directive("tabs-lifecycle", {
    inserted(_el, _binding, vnode) {
      // 获取须要增加生命周期办法的ElTabs的实例
      const ins: any = vnode.componentInstance;
      // 获取所有ELPane的实例
      const panes: any[] = ins.$children.filter((k: any) => k.$vnode.tag?.includes("ElTabPane")) ??
        [];
      // 监听ElTabs的tab-click事件。详见官网文档。
      ins.$on("tab-click", async () => {
        // Promise.resolve()的成果等于 Vue.$nextTick();
        // 这一行也可改成ins.$nextTick();
        await Promise.resolve();
        // 遍历ElPane实例
        panes.forEach((pane) => {
            // 看源码可知ElPane的active属性代表以后ElPane是否被关上了
            // 从Vue devtool中也能够得悉这一点。
          if (!pane.active) return;
            // 从pane的实例上抛出一个激活事件。能够间接在模板中监听
          pane.$emit("active");
            // 调用callOnShow办法，该办法会递归pane的所有的子孙组件，并调用他们的elPaneActivated办法，如果有的话。
          callOnShow([pane]);
        });
      });
    },
  });

应用

1. 首先须要在ElTabs上应用这个指令

   <el-tabs v-tabs-lifecycle>
   ....
   <el-tabs>

2. 在某个子组件中

   elPaneActivated(){
    //以后组件所属的标签被关上了
   }

3. 在模板中
   监听ElTabPane的active事件即可

   <el-tabs v-tabs-lifecycle>
       <el-tab-pane @active="onActive">
       </el-tab-pane>
   <el-tabs>

   完。