Update Modal.vue

packages/components/Modal/Modal.vue

 <template>
   <!--<transition :name="transition">-->
-  <div v-show="showModal" :class="active" class="modal-backdrop" @touchstart="hideModal">
+  <div v-show="showModal" :class="active" class="modal-backdrop" @click.capture="hideModal">
     <div class="modal-backdrop-bg"/>
     <div
-      :class="[modalClass,cusClass]"
-      class="modal slide-in-up"
+      :class="[modalClass,transition]"
+      class="modal"
       @touchstart="start"
       @mousedown="start">
       <slot/>
@@ -19,7 +19,7 @@ export default {
     value: Boolean, // eslint-disable-line
     position: {
       type: String,
-      default: 'bottom',
+      default: 'top',
     },
     cusClass: {
       type: String,
@@ -34,7 +34,12 @@ export default {
   },
   computed: {
     transition () {
-      return this.position === 'bottom' ? 'slide-in-up' : 'slide-in-down'
+      return {
+        'slide-in-up': this.position === 'top',
+        'slide-in-down': this.position === 'bottom',
+        'slide-in-left': this.position === 'left',
+        'slide-in-right': this.position === 'right',
+      }
     },
     active () {
       return this.showModal ? 'active' : 'hide'
@@ -59,7 +64,7 @@ export default {
         this.state = 2
         setTimeout(() => {
         }, 400)
-      }, 50)
+      }, 100)
     },
     showModal (val) {
       // 标签用法时需要发射一个input事件，修改v-model绑定的属性值
@@ -72,14 +77,16 @@ export default {
 
     },
     start (e) {
-      e.stopPropagation()
+     // e.stopPropagation()
     },
-    hideModal () {
+    hideModal (e) {
+      if(e.target.className.indexOf('modal-backdrop') === 0){
         this.state = 3
         setTimeout(() => {
           this.state = 0
           this.showModal = false
         }, 250)
+      }
     },
   },
 }