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

最新推荐文章于 2024-09-27 11:09:15 发布

唐十八_wei

最新推荐文章于 2024-09-27 11:09:15 发布

阅读量2.8w

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shibaweijin/article/details/128862395

版权

文章介绍了如何在Vue项目中创建一个自定义的ConfirmAlert组件，该组件利用el-dialog实现平滑的关闭动画。通过新建Vue实例，动态插入DOM并返回Promise进行异步操作，使得在调用时可以使用.then和.catch处理确认或取消操作。组件具有高度可定制性，允许自定义消息内容、按钮文字等。

摘要由CSDN通过智能技术生成

这里使用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> -->