关于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>

   完。