init

src/components/Modal.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="md-modal" v-if="mdShow">
+      <transition name="bounce">
+        <div class="modal-inner">
+            <div class="modal-content">
+                <!-- <div class="modal-message">{{question}}</div> -->
+                <slot></slot>
+            </div>
+            <div class="mgt15 fxrow">
+              <button class="fxcol btn btn-disabled submit-button" @click="closeModal">取消</button>
+              <button class="btn btn-disabled submit-button bl1px" v-if="comfirmDisable">确认</button>
+              <button class="btn submit-button" v-if="!comfirmDisable" @click="comfirm">确认</button>
+            </div>
+        </div>
+      </transition>
+      <transition name="fade">
+        <div class="overlay"></div>
+      </transition>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    // question: String,
+    mdShow: Boolean,
+    comfirmDisable: Boolean,
+    type: String
+  },
+  methods: {
+    closeModal () {
+      this.$emit('closeModalCallback')
+    },
+    comfirm () {
+      this.$emit('comfirmCallback', this.type)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.modal-inner
+  position fixed
+  top 50%
+  left 50%
+  width 80%
+  font-size .28rem
+  overflow hidden
+  transition .3s
+  border-radius 4px
+  background-color #fff
+  transform translate3d(-50%, -50%, 0)
+  z-index 2018
+.overlay
+  position fixed
+  top 0
+  left 0
+  width 100%
+  height 100%
+  background-color rgba(0, 0, 0, .7)
+  z-index 11
+>>>.btn
+  border-radius 0
+>>>.submit-button
+  margin 0
+.bl1px
+  border-left 1px solid #fff
+</style>