vue2 封装确认弹框 干货版

公司项目 遇到需要自定义确认弹框的需求 下面是我的解决方案 组件代码

公司项目 遇到需要自定义确认弹框的需求 下面是我的解决方案
组件代码

```javascript
<template>
    <el-dialog
        :visible.sync="visible"
        @close="handleClose"
        custom-class="myconfirm"
        :show-close="false"
        width="503px">
        <div slot="title" style="height: 68px;position: relative">
            <img :src="headerImg">
            <div class="mycancel" @click="cancel">
                <i class="el-icon-close"></i>
            </div>
        </div>
        <div slot="default" class="default">
            <img :src="tipImg">
            <div style="margin-top: 20px">{{message}}</div>
        </div>
        <span slot="footer" style="display: flex;justify-content: space-around">
            <el-button v-if="options.showCancelButton" plain class="buttonSize" @click="cancel">{{options.cancelButtonText}}</el-button>
            <el-button type="primary" class="buttonSize" @click="confirm">{{options.confirmButtonText}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import headerInfo from "./header_info.png"
    import headerSuccess from "./header_success.png"
    import headerError from "./header_error.png"
    import tipInfo from "./tip_info.png"
    import tipSuccess from "./tip_success.png"
    import tipError from "./tip_error.png"
    export default {
        data() {
            return {
                visible: false,
                message: '',
                resolvePromise: null,
                options:{
                    showCancelButton:true,
                    type:"info",//info 提示  success  成功   error 服务器繁忙
                    confirmButtonText:"确 定",
                    cancelButtonText:"取 消"
                }
            };
        },
        computed:{
            headerImg(){
                if(this.options.type == "info"){
                    return headerInfo
                }else if(this.options.type == "success"){
                    return headerSuccess
                }else if(this.options.type == "error"){
                    return headerError
                }
                },
            tipImg(){
                if(this.options.type == "info"){
                    return tipInfo
                }else if(this.options.type == "success"){
                    return tipSuccess
                }else if(this.options.type == "error"){
                    return tipError
                }
            }
        },
        methods: {
            open(message,options) {
                this.message = message;
                if(options){
                    options.showCancelButton && (this.options.showCancelButton = options.showCancelButton)
                    options.type && (this.options.type = options.type)
                    options.confirmButtonText && (this.options.confirmButtonText = options.confirmButtonText)
                    options.cancelButtonText && (this.options.cancelButtonText = options.cancelButtonText)
                }
                this.visible = true;
                return new Promise((resolve, reject) => {
                    this.resolvePromise = { resolve, reject };
                });
            },
            confirm() {
                this.resolvePromise.resolve(true);
                this.visible = false;
            },
            cancel() {
                this.resolvePromise.reject(false);
                this.visible = false;
            },
            handleClose() {
                this.resolvePromise.reject(false);
            }
        }
    };
</script>
<style scoped lang="scss">
    ::v-deep .myconfirm .el-dialog__header{
        padding: unset !important;
        padding-bottom: unset !important;
    }
    ::v-deep .myconfirm .el-dialog__body{
        padding: unset !important;
    }
    ::v-deep .myconfirm .el-dialog__footer{
        padding-top: 20px !important;
    }
    .default{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(to bottom,#D9E9FF,#FFFFFF);
    }
    .mycancel{
        height: 100%;
        width: 95px;
        position: absolute;
        right: 0;
        top: 0;
        background: #D9E9FF;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .mycancel i{
        font-size: 28px;
    }
    .buttonSize{
        width: 156px;height: 40px
    }

    ::v-deep .el-dialog.myconfirm:not(.is-fullscreen){
        margin-top: 30vh !important;
    }
</style>

挂载到全局

//自定义弹框
import MyConfirm from "@/components/MyConfirm/index.vue"
//自定义弹框
Vue.prototype.$myconfirm = function (message,options) {
    const ConfirmConstructor = Vue.extend(MyConfirm);
    const instance = new ConfirmConstructor();
    instance.$mount();
    document.body.appendChild(instance.$el);
    return instance.open(message,options);
};

把里面的内容替换为自己需要的自定义内容即可 也可以根据需要修改 如有疑问 可以通过微信公众号"酷爱篮球的前端小李"联系到我

挂载到全局
```javascript
//自定义弹框
import MyConfirm from "@/components/MyConfirm/index.vue"
//自定义弹框
Vue.prototype.$myconfirm = function (message,options) {
    const ConfirmConstructor = Vue.extend(MyConfirm);
    const instance = new ConfirmConstructor();
    instance.$mount();
    document.body.appendChild(instance.$el);
    return instance.open(message,options);
};

把里面的内容替换为自己需要的自定义内容即可 也可以根据需要修改 如有疑问 可以通过微信公众号"酷爱篮球的前端小李"联系到我