[improvement] Popup: jsx (#2614)

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>