init

src/components/asyncModal/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <Modal v-model="showModal" :width="width||80" :title="title" v-bind="$attrs">
+    <div class="asyncModal-box">
+      <slot></slot>
+    </div>
+
+    <div slot="footer">
+      <Button @click="hide">取消</Button>
+      <Button class="ml30" type="primary" @click="saveInfo">确定</Button>
+    </div>
+
+  </Modal>
+</template>
+
+<script>
+export default {
+  props: ['title', 'width'],
+  data() {
+    return {
+      showModal: false,
+      callback: null
+    }
+  },
+  methods: {
+    show(callback) {
+      this.showModal = true
+      this.callback = callback
+    },
+    hide() {
+      this.showModal = false
+    },
+
+    async saveInfo() {
+      if (this.callback) {
+        await this.callback()
+      }
+      this.$emit('on-ok')
+      this.hide()
+    }
+  }
+}
+</script>
+<style lang="less"  scoped>
+.asyncModal-box {
+  max-height: 90vh;
+  min-height: 20vh;
+  overflow: auto;
+}
+</style>