vue中关于confirm确认框的用法

this.$confirm("是否确认该操作","提示",{
    iconClass: "el-icon-question",//自定义图标样式
    confirmButtonText: "确认",//确认按钮文字更换
    cancelButtonText: "取消",//取消按钮文字更换
    showClose: true,//是否显示右上角关闭按钮
    type: "warning",//提示类型  success/info/warning/error
}).then(()=>{
    //确认操作
}).then((data) => {
    //取消操作
}).catch((err) => {
  	//捕获异常
  	console.log(err);
});

<template>
<div :class="{'pop-up':true,'show':show}">
    <div class="popup-mask" v-if="hasMark"></div>
    <transition name="bottom">
        <div class="popup-note bottom">
            <div class="pop-content">
                <div class="pop-tit">
                    {{title}}
                </div>
                <p class="pop-note hasTitle">
                    <span class="msg" v-html="msg"></span>
                </p>
                <div class="btn-wrapper" v-if="type == 'alert'" @click.stop="alertClick">
                    <span class="btn btn-block yes-btn">{{alertBtnText}}</span>
                </div>
                <div class="btn-wrapper" v-if="type == 'confirm'">
                    <span @touchstart.prevent="noClick" class="btn">{{noBtnText}}</span>
                    <span @touchstart.prevent="yesClick" class="btn yes-btn">{{yesBtnText}}
            </span>
                </div>
            </div>
        </div>
    </transition>
</div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: '提示'
        },
        msg: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'alert'
        },
        alertBtnText: {
            type: String,
            default: '我知道了'
        },
        yesBtnText: {
            type: String,
            default: '确定'
        },
        noBtnText: {
            type: String,
            default: '取消'
        },
        hasMark: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            promiseStatus: null,
            show: false
        }
    },
    methods: {
        confirm() {
            let _this = this;
            this.show = true;
            return new Promise(function (resolve, reject) {
                _this.promiseStatus = {resolve, reject};
            });
        },
        noClick() {
            this.show = false;
            this.promiseStatus && this.promiseStatus.reject();
        },
        yesClick() {
            this.show = false;
            this.promiseStatus && this.promiseStatus.resolve();
        },
        alertClick() {
            this.show = false;
            this.promiseStatus && this.promiseStatus.resolve();
        }
    }
}
</script>
<style lang='less'>
@import "../../../static/less/components/tip/index.less";
</style>

import Vue from 'vue'
import message from './message.vue'
const VueComponent = Vue.extend(message);
const vm = new VueComponent().$mount();
let init = false;
let defaultOptions = {
yesBtnText: '确定',
noBtnText: '取消'
};
const confirm = function (options) {
Object.assign(vm,defaultOptions , options,{
    type:'confirm'
});
if (!init) {
    document.body.appendChild(vm.$el);
    init = true;
}
return vm.confirm();
};
export default confirm;

import confirm from './views/components/message/confirm'
Vue.prototype.$confirm = confirm;

this.$confirm({
    title: '',
    msg: '模式未保存，确定离开？',
    yesBtnText: "离开"
}).then(() => {
    console.log('yes')
    })
   .catch(() => {
    console.log('cancel')
});