vue结合el-dialog 封装自己的confirm二次确认弹窗

这里使用el-dialog 主要是用他的关闭动画，让关闭更加丝滑
首先在components 添加 ConfirmAlert文件夹 然后添加vue和js 文件

index.js

import Vue from 'vue';
import confirm from './index.vue'
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (content) {
    return new Promise((res, rej) => {
        //返回promise，ok执行resolve,调用时使用.then继续，no执行reject调用时使用catch捕捉
        let confirmDom = new confirmConstructor({
            el: document.createElement('div')
        })
        const elDiv = document.body.appendChild(confirmDom.$el); //new一个对象，然后插入body里面
        confirmDom.content = content; //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
        confirmDom.ok = function () {
            res()
            close()
        }
        confirmDom.close = function () {
            rej()
            close()
        }
        function close() {
            confirmDom.dialogVisible = false
            setTimeout(() => {
                console.log('remove');
                elDiv.remove()
            }, 1000);
        }
    })
}
export default theConfirm;

index.vue

<template>
    <div class="confirm-container">
        <el-dialog :title="content.type" :before-close="close" :visible.sync="dialogVisible" width="30%">
            <div class="confirm-content">
                <p class="msgContent">{{ content.msg }}
                </p>
                <div class="foot" slot="footer">
                    <el-button type="primary" @click.stop="close">
                        <span>{{ content.btn.no || '确认' }}</span>
                    </el-button>
                    <el-button type="primary" @click.stop="ok">
                        <span>{{ content.btn.ok || '取消' }}</span>
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            content: {
                type: '提示',
                msg: '',
                btn: {
                    ok: '确定',
                    no: '取消'
                },
            },
            dialogVisible: true
        }
    },
    methods: {
        close() {
            console.log('关闭');
        },
        ok() {
            console.log('确定')
        }
    }
}
</script>
<style scoped>
.msgContent {
    text-align: center;
}

.foot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
</style>

main.js将alertConfirm挂载vue上

import alertConfirm from '@/components/confirmAlert'
Vue.prototype.$alertConfirm = alertConfirm;

组件中使用

<!--  -->
<template>
    <div>
        <el-button @click="btn">log</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    watch: {},
    components: {},
    computed: {},
    created() { },
    mounted() { },
    methods: {
        btn() {
            let that = this // 存储this指向
            this.$alertConfirm({
                type: '提示',
                msg: '是否删除这条信息？',
                btn: {
                    ok: '确定', no: '取消'
                },
                //msgDetail: ''
            }).then(() => {
                // 确认
                // do something
                that.logs('确认')
            }).catch(() => {
                //取消
                // do something
                that.logs('取消')
            })
        },
        logs(type) {
            console.log('调用组件的' + type);
        }
    }
}

</script>
<!-- <style scoped>
</style> -->