diff --git a/packages/tab/index.js b/packages/tab/index.js index d4c2b0961..b1e1ebf02 100644 --- a/packages/tab/index.js +++ b/packages/tab/index.js @@ -58,9 +58,11 @@ export default sfc({ render(h) { const { slots } = this; + const shouldRender = this.inited || !this.parent.lazyRender; + return (
- {this.inited ? slots() : h()} + {shouldRender ? slots() : h()} {slots('title') &&
{slots('title')}
}
); diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap index c7eb17117..a681b9ca5 100644 --- a/packages/tab/test/__snapshots__/index.spec.js.snap +++ b/packages/tab/test/__snapshots__/index.spec.js.snap @@ -94,6 +94,51 @@ exports[`click to switch tab 2`] = ` `; +exports[`lazy render 1`] = ` +
+
+
+
+
title1
+
+
title3
+
+
+
+
Text
+ + +
+
+`; + +exports[`lazy render 2`] = ` +
+
+
+
+
title1
+
+
title2
+
+
title3
+
+
+
+
Text
+ + +
+
+`; + exports[`swipe to switch tab 1`] = `
diff --git a/packages/tab/test/index.spec.js b/packages/tab/test/index.spec.js index 6a84b0198..ad51b3263 100644 --- a/packages/tab/test/index.spec.js +++ b/packages/tab/test/index.spec.js @@ -11,6 +11,7 @@ function createWrapper(options) { :swipeable="swipeable" :sticky="sticky" :line-width="lineWidth" + :lazy-render="lazyRender" > Text @@ -31,7 +32,8 @@ function createWrapper(options) { type: 'line', swipeable: true, sticky: true, - lineWidth: 2 + lineWidth: 2, + lazyRender: true }; }, ...options @@ -97,3 +99,16 @@ test('change tabs data', async () => { await later(); expect(wrapper).toMatchSnapshot(); }); + +test('lazy render', async () => { + const wrapper = createWrapper(); + + expect(wrapper).toMatchSnapshot(); + + wrapper.setData({ + lazyRender: false + }); + + await later(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/tabs/index.js b/packages/tabs/index.js index e6937b3d1..1aad650d2 100644 --- a/packages/tabs/index.js +++ b/packages/tabs/index.js @@ -27,6 +27,10 @@ export default sfc({ type: Boolean, default: true }, + lazyRender: { + type: Boolean, + default: true + }, lineWidth: { type: Number, default: null