init

src/components/myConfirm/confirm.vue

@@ -0,0 +1,64 @@
+<template>
+    <Modal v-model="modal" @on-visible-change="showChange" :title="title || '提示'">
+        <Alert type="warning" class="mb-1" show-icon>
+            <Icon type="ios-bulb-outline" :class="{ 'mt-5': !info }" slot="icon" :size="28"></Icon>
+            <div v-if="msg" :class="['message-box', info ? '' : 'mt-10 mb-10 ml-10']">{{ msg }}</div>
+            <span v-if="info" slot="desc">{{ info }}</span>
+        </Alert>
+        <div slot="footer">
+            <Button type="primary" @click="ok">确定</Button>
+            <Button @click="cancle">取消</Button>
+        </div>
+    </Modal>
+</template>
+
+<script>
+export default {
+    props: {
+        title: String,
+        msg: String,
+        info: String,
+        onOk: Function,
+        onCancel: Function,
+    },
+    data() {
+        return {
+            modal: false,
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.modal = true;
+        });
+    },
+    methods: {
+        ok() {
+            this.modal = false;
+            typeof this.onOk === "function" && this.onOk();
+        },
+        cancle() {
+            this.modal = false;
+            typeof this.onCancel === "function" && this.onCancel();
+        },
+        showChange(state) {
+            if (!state) this.destroy();
+        },
+        destroy() {
+            setTimeout(() => {
+                document.body.removeChild(this.$el);
+            }, 300);
+        },
+    },
+};
+</script>
+
+<style scoped>
+.my-confirwm {
+    margin-bottom: 0;
+}
+.message-box {
+    font-size: 16px;
+    color: #17233d;
+    display: block;
+}
+</style>

src/components/myConfirm/index.js

@@ -0,0 +1,23 @@
+import Vue from "vue";
+import confirm from "./confirm.vue";
+export default props => {
+    // 创建实例
+    const vm = new Vue({
+        render(h) {
+            // h为createElement，返回VNode虚拟Node
+            return h(confirm, { props });
+        }
+    }).$mount();
+
+    // 手动挂载实例到body
+    document.body.appendChild(vm.$el);
+
+    const comp = vm.$children[0];
+    // 销毁方法
+    // comp.remove = function() {
+    //     document.body.removeChild(vm.$el);
+    //     vm.$destroy();
+    // };
+    // 返回组件
+    return comp;
+};