[Improvement] Actionsheet: support lazy render (#1365)

packages/actionsheet/en-US.md

@@ -74,6 +74,7 @@ Actionsheet will get another style if there is a `title` prop.
 | cancel-text | Text of cancel button | `String` | - |
 | overlay | Whether to show overlay | `Boolean` | - |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | - |
+| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for actionsheet | `() => HTMLElement` | - |
 
 ### Event

packages/actionsheet/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="van-slide-bottom">
-    <div v-show="value" :class="b({ 'withtitle': title })">
+    <div v-if="shouldRender" v-show="value" :class="b({ 'withtitle': title })">
       <div v-if="title" class="van-hairline--top-bottom" :class="b('header')">
         <div v-text="title" />
         <icon name="close" @click="onCancel" />

packages/actionsheet/test/__snapshots__/demo.spec.js.snap

@@ -5,55 +5,17 @@ exports[`renders demo correctly 1`] = `
   <div>
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">弹出 Actionsheet</span></button>
-    <div class="van-actionsheet" style="display:none;">
+    <!---->
-      <ul class="van-hairline--bottom">
-        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
-          <!---->
-        </li>
-        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
-        <li class="van-actionsheet__item van-hairline--top">
-          <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-        </li>
-        <li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
-          <!---->
-        </li>
-      </ul>
-      <div class="van-actionsheet__content"></div>
-    </div>
   </div>
   <div>
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
-    <div class="van-actionsheet" style="display:none;">
+    <!---->
-      <ul class="van-hairline--bottom">
-        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
-          <!---->
-        </li>
-        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
-        <li class="van-actionsheet__item van-hairline--top">
-          <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-        </li>
-        <li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
-          <!---->
-        </li>
-      </ul>
-      <div class="van-actionsheet__cancel van-hairline--top">取消</div>
-    </div>
   </div>
   <div>
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
-    <div class="van-actionsheet van-actionsheet--withtitle" style="display:none;">
+    <!---->
-      <div class="van-hairline--top-bottom van-actionsheet__header">
-        <div>标题</div>
-        <i class="van-icon van-icon-close" style="color:undefined;">
-          <!---->
-        </i>
-      </div>
-      <div class="van-actionsheet__content">
-        <p>内容</p>
-      </div>
-    </div>
   </div>
 </div>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-actionsheet" style="display: none;" name="van-slide-bottom">
+<div class="van-actionsheet" name="van-slide-bottom">
   <ul class="van-hairline--bottom">
     <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
       <!---->

packages/actionsheet/test/index.spec.js

@@ -5,6 +5,7 @@ test('callback events', () => {
   const callback = jest.fn();
   const wrapper = mount(Actionsheet, {
     propsData: {
+      value: true,
       actions: [
         { name: 'Option', callback },
         { name: 'Option' }

packages/actionsheet/zh-CN.md

@@ -77,6 +77,7 @@ export default {
 | cancel-text | 取消按钮文字 | `String` | - |
 | overlay | 是否显示遮罩层 | `Boolean` | - |
 | close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
+| lazy-render | 是否在首次显示弹层时才渲染 DOM 节点 | `Boolean` | `true` |
 | get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
 
 ### Event

packages/mixins/popup/index.js

@@ -26,11 +26,29 @@ export default {
     lockScroll: {
       type: Boolean,
       default: true
+    },
+    // whether to lazy render
+    lazyRender: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      inited: this.value
+    };
+  },
+
+  computed: {
+    shouldRender() {
+      return this.inited || !this.lazyRender;
     }
   },
 
   watch: {
     value(val) {
+      this.inited = this.inited || this.value;
       this[val ? 'open' : 'close']();
     },
 

packages/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-if="inited || !lazyRender" v-show="value" :class="b({ [position]: position })">
+    <div v-if="shouldRender" v-show="value" :class="b({ [position]: position })">
       <slot />
     </div>
   </transition>
@@ -17,10 +17,6 @@ export default create({
 
   props: {
     transition: String,
-    lazyRender: {
-      type: Boolean,
-      default: true
-    },
     overlay: {
       type: Boolean,
       default: true
@@ -35,22 +31,10 @@ export default create({
     }
   },
 
-  data() {
-    return {
-      inited: this.value
-    };
-  },
-
   computed: {
     currentTransition() {
       return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
     }
-  },
-
-  watch: {
-    value() {
-      this.inited = this.inited || this.value;
-    }
   }
 });
 </script>