为ElementUI的标签页添加生命周期为ElementUI的标签页添加生命周

在现有ElementUI下，子组件是不知道自己所属的标签页是否处于开启状态的。
下面写一个Vue的指令让子组件知道
实现
【为ElementUI的标签页添加生命周期】请看逐行注释。

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]); }); }); }, });

使用