feat(tabs): support tab-panel content lazy load (#2714)

* feat(tabs): support tab-panel content lazy load re #2666 * fix(tabs): fix tabs data-loaded lint:tsc error re #2666
Tencent · Aug 23, 2023 · 6087268 · 6087268
1 parent 158b519
commit 6087268
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 5 deletions.
diff --git a/src/tabs/__tests__/index.test.jsx b/src/tabs/__tests__/index.test.jsx
@@ -71,6 +71,72 @@ describe('Tabs', () => {
       });
       expect(wrapper.element).toMatchSnapshot();
     });
+    it(':destroyOnHide', async () => {
+      const wrapper = mount({
+        data() {
+          return {
+            currentTab: 1,
+          };
+        },
+        render() {
+          return (
+            <Tabs value={this.currentTab}>
+              <TabPanel class="tab-panel-1" value={1} label={'1'} destroyOnHide={true}>
+                1
+              </TabPanel>
+              <TabPanel class="tab-panel-2" value={2} label={'2'} destroyOnHide={true}>
+                2
+              </TabPanel>
+            </Tabs>
+          );
+        },
+      });
+
+      expect(wrapper.find('.tab-panel-1').text()).toBe('1');
+      expect(() => wrapper.get('.tab-panel-2')).toThrowError();
+
+      wrapper.setData({ currentTab: 2 });
+      await Vue.nextTick();
+      expect(() => wrapper.get('.tab-panel-1')).toThrowError();
+      expect(wrapper.find('.tab-panel-2').text()).toBe('2');
+    });
+
+    it(':lazy', async () => {
+      const wrapper = mount({
+        data() {
+          return {
+            currentTab: 1,
+          };
+        },
+        render() {
+          return (
+            <Tabs value={this.currentTab}>
+              <TabPanel class="tab-panel-1" lazy value={1} label={'1'} destroyOnHide={false}>
+                1
+              </TabPanel>
+              <TabPanel class="tab-panel-2" lazy value={2} label={'2'} destroyOnHide={false}>
+                2
+              </TabPanel>
+            </Tabs>
+          );
+        },
+      });
+
+      const displayNoneStyle = 'display: none;';
+
+      expect(wrapper.find('.tab-panel-1').attributes().style).toBeFalsy();
+      expect(() => wrapper.get('.tab-panel-2')).toThrowError();
+
+      wrapper.setData({ currentTab: 2 });
+      await Vue.nextTick();
+      expect(wrapper.find('.tab-panel-1').attributes().style).toBe(displayNoneStyle);
+      expect(wrapper.find('.tab-panel-2').attributes().style).toBeFalsy();
+
+      wrapper.setData({ currentTab: 1 });
+      await Vue.nextTick();
+      expect(wrapper.find('.tab-panel-1').attributes().style).toBeFalsy();
+      expect(wrapper.find('.tab-panel-2').attributes().style).toBe(displayNoneStyle);
+    });
   });
 
   // test events

diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts
@@ -36,4 +36,9 @@ export default {
   },
   /** 点击删除按钮时触发 */
   onRemove: Function as PropType<TdTabPanelProps['onRemove']>,
+  /** 标签内容是否延迟渲染 */
+  lazy: {
+    type: Boolean,
+    default: false,
+  },
 };
diff --git a/src/tabs/tab-panel.tsx b/src/tabs/tab-panel.tsx
@@ -18,14 +18,26 @@ export default mixins(Vue as VueConstructor<TabPanel>, classPrefixMixins).extend
 
   props: { ...props },
 
+  data() {
+    return {
+      loaded: false,
+    };
+  },
+
   inject: {
     parent: { default: null },
   },
 
   computed: {
     active(): boolean {
       const { value } = this.parent || {};
-      return this.value === value;
+      const result = this.value === value;
+
+      if (result) {
+        this.loaded = true;
+      }
+
+      return result;
     },
   },
 
@@ -41,8 +53,12 @@ export default mixins(Vue as VueConstructor<TabPanel>, classPrefixMixins).extend
   },
 
   render() {
-    const { destroyOnHide, active } = this;
-    if (destroyOnHide && !active) return null;
+    const {
+      destroyOnHide, active, lazy, loaded,
+    } = this;
+
+    if ((destroyOnHide && !active) || (lazy && !loaded)) return null;
+
     return (
       <div class={this.componentName} v-show={active}>
         {renderContent(this, 'default', 'panel')}

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -41,6 +41,7 @@ panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS
 removable | Boolean | false | 当前选项卡是否允许移除 | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N
 onRemove | Function |  | TS 类型：`(options: { value: TabValue; e: MouseEvent }) => void`<br/>点击删除按钮时触发 | N
+lazy | Boolean | false | 标签内容是否延迟渲染 | N
 
 ### TabPanel Events
 

diff --git a/src/tabs/type.ts b/src/tabs/type.ts
@@ -57,7 +57,7 @@ export interface TdTabsProps {
    * 删除选项卡时触发
    */
   onRemove?: (options: { value: TabValue; index: number; e: MouseEvent }) => void;
-};
+}
 
 export interface TdTabPanelProps {
   /**
@@ -95,6 +95,10 @@ export interface TdTabPanelProps {
    * 点击删除按钮时触发
    */
   onRemove?: (options: { value: TabValue; e: MouseEvent }) => void;
-};
+  /**
+   * 标签是否延迟渲染
+   */
+  lazy?: Boolean;
+}
 
 export type TabValue = string | number;