vue+element 自定义确认弹窗

import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$confirmMsgBox = function alert (
    msg: any = '是否删除',             // 内容
    title: any = '提示',               // 弹窗标题
    title1: any = '确认删除？',         // 弹窗内容标题 
    iconType: any = 'el-icon-warning', // 图标类型
    iconColor: any = '#ccc',           // 图标颜色
    settings: any = {}
) {
    Object.assign(settings, {
        customClass: 'scrm-confirm-modal',  // 弹窗自定义class
        confirmButtonText: '确定',          // confirm按钮文字
        cancelButtonText: '取消',           // cancel按钮文字
        cancelButtonClass: 'scrm-confirm-modal-cancel-btn',           // cancel按钮自定义class
        confirmButtonClass: 'scrm-confirm-modal-confirm-btn',        // confirm按钮自定义class
        center: true,                  // 弹窗内容是否居中
        dangerouslyUseHTMLString: true // 允许确认框内容为html格式
    })
    return this.$confirm(
        // 定义样式已经设置为html格式，可以自定义
        `
        <div class="scrm-confirm-modal-container">
            <p class="scrm-confirm-modal-subtitle">
                <i class=${iconType} style="color:${iconColor}"></i>
                <span>${title1}</span>
            </p>
            <p class="scrm-confirm-modal-desc">${msg}</p>
        </div>
      `,
        // 把定义的参数反出去
        title,
        settings,
        title1,
        iconType,
        iconColor
    )
}

// 自定义确认提示弹窗样式
.scrm-confirm-modal{
    // width: 554px;
    box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
    border-radius:4px;
    padding-bottom: 40px;
    .el-message-box__header{
        padding: 16px 24px;
        font-size: 20px;
        color:rgba(0,0,0,0.85);
        font-weight: 500;
        border-bottom: 1px solid rgba(0,0,0,0.09);
        text-align: left;
        span{
            width: 100%;
        }
    }
    &-container{
        width:336px;
        text-align:center;
        margin:22px auto;
    }
    &-subtitle{
        margin-bottom:22px!important;
        i{
            margin-right:15px;
            font-size:36px;
            vertical-align:middle;
        }
        span{
            font-size:22px;
            color:#000;
            font-weight:500
        }
    }
    &-desc{
        font-weight:400;
        color:rgba(0,0,0,0.65);
        font-size: 16px;
    }
    .el-button{
        padding: 14px 48px;
        font-size: 22px;
        border-radius: 4px;
    }
    &-cancel-btn,
    &-cancel-btn:hover{
        background:rgba(245,247,250,1);
        border:1px solid rgba(232,235,239,1);
        color: #6E7073;
    }
    &-confirm-btn,
    &-confirm-btn:hover,
    &-confirm-btn:active{
        border: none;
        background:linear-gradient(229deg,rgba(255,100,100,1) 0%,rgba(255,59,35,1) 100%)!important;
    }
}

// 页面中使用（方法）
soldOut (row:any) {
    this.$confirmMsgBox(
        '下架后的会员卡不可销售已办理该卡的客户使用不受影响',
        '下架确认',
        '确认下架会员卡吗？',
        'el-icon-error',
        '#EE5050'
    ).then(() => {
        // 确定删除执行的方法
    }).catch(() => {
       // 取消删除
       this.$message({
            type: 'info',
            message: '已取消'
       })
   })
}