[new feature] Tabs: add lazy-render props (#2800)

packages/tab/index.js

@@ -58,9 +58,11 @@ export default sfc({
 
   render(h) {
     const { slots } = this;
+    const shouldRender = this.inited || !this.parent.lazyRender;
+
     return (
       <div vShow={this.selected || this.parent.animated} class={bem('pane')}>
-        {this.inited ? slots() : h()}
+        {shouldRender ? slots() : h()}
         {slots('title') && <div ref="title">{slots('title')}</div>}
       </div>
     );

packages/tab/test/__snapshots__/index.spec.js.snap

@@ -94,6 +94,51 @@ exports[`click to switch tab 2`] = `
 </div>
 `;
 
+exports[`lazy render 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab"><span class="van-ellipsis"></span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <div><span>title2</span></div>
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`lazy render 2`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab">
+        <div><span>title2</span></div>
+      </div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;">
+      Text
+    </div>
+    <div class="van-tab__pane" style="display: none;">Text</div>
+  </div>
+</div>
+`;
+
 exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">

packages/tab/test/index.spec.js

@@ -11,6 +11,7 @@ function createWrapper(options) {
         :swipeable="swipeable"
         :sticky="sticky"
         :line-width="lineWidth"
+        :lazy-render="lazyRender"
       >
         <tab :title="title1">Text</tab>
         <tab>
@@ -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();
+});

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