[improvement] Popup: jsx (#2614)

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -31,7 +31,7 @@ exports[`create a AddressEdit 1`] = `
     </div>
   </div>
   <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
-  <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+  <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div class="van-picker__cancel">取消</div>
@@ -104,7 +104,7 @@ exports[`create a AddressEdit with props 1`] = `
     </div>
   </div>
   <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
-  <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+  <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div class="van-picker__cancel">取消</div>

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
         <!----></i>
     </div>
-    <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+    <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-list">
         <div class="van-radio-group">
           <div class="van-cell van-cell--clickable">
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
         </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
       </div>
     </div>
-    <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+    <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-edit">
         <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
           <div class="van-cell__title"><span>张三</span></div>

packages/popup/index.js

@@ -0,0 +1,38 @@
+import { use } from '../utils';
+import Popup from '../mixins/popup';
+
+const [sfc, bem] = use('popup');
+
+export default sfc({
+  mixins: [Popup],
+
+  props: {
+    position: String,
+    transition: String,
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  render(h) {
+    if (!this.shouldRender) {
+      return;
+    }
+
+    const { position } = this;
+    const transitionName = this.transition || (position ? `van-popup-slide-${position}` : 'van-fade');
+
+    return (
+      <transition name={transitionName}>
+        <div vShow={this.value} class={bem({ [position]: position })}>
+          {this.$slots.default}
+        </div>
+      </transition>
+    );
+  }
+});

packages/popup/index.less

@@ -49,25 +49,25 @@
       left: 0;
       transform: translate3d(0, -50%, 0);
     }
+
+    &-slide-top-enter,
+    &-slide-top-leave-active {
+      transform: translate3d(-50%, -100%, 0);
+    }
+
+    &-slide-right-enter,
+    &-slide-right-leave-active {
+      transform: translate3d(100%, -50%, 0);
+    }
+
+    &-slide-bottom-enter,
+    &-slide-bottom-leave-active {
+      transform: translate3d(-50%, 100%, 0);
+    }
+
+    &-slide-left-enter,
+    &-slide-left-leave-active {
+      transform: translate3d(-100%, -50%, 0);
+    }
   }
 }
-
-.popup-slide-top-enter,
-.popup-slide-top-leave-active {
-  transform: translate3d(-50%, -100%, 0);
-}
-
-.popup-slide-right-enter,
-.popup-slide-right-leave-active {
-  transform: translate3d(100%, -50%, 0);
-}
-
-.popup-slide-bottom-enter,
-.popup-slide-bottom-leave-active {
-  transform: translate3d(-50%, 100%, 0);
-}
-
-.popup-slide-left-enter,
-.popup-slide-left-leave-active {
-  transform: translate3d(-100%, -50%, 0);
-}

packages/popup/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <transition :name="currentTransition">
-    <div
-      v-if="shouldRender"
-      v-show="value"
-      :class="b({ [position]: position })"
-    >
-      <slot />
-    </div>
-  </transition>
-</template>
-
-<script>
-import create from '../utils/create';
-import Popup from '../mixins/popup';
-
-export default create({
-  name: 'popup',
-
-  mixins: [Popup],
-
-  props: {
-    position: String,
-    transition: String,
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  computed: {
-    currentTransition() {
-      return this.transition || (this.position ? `popup-slide-${this.position}` : 'van-fade');
-    }
-  }
-});
-</script>