vue自定义$confirm弹窗确认组件

前言

1.Vue.extend()

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
.vue单文件经过webpack打包之后是一个组件示例对象，因此可以传到Vue.extend中生成一个包含此组件的类

2.new VueComponent().$mount()

new VueComponent() 创建实例，调用$mount()可以手动编译

如果.$mount(’#app’)有参数，表示手动编译并且挂载到该元素上。

3.$el属性 类型：string | HTMLElement

手动编译后的示例对象中存在一个$el对象（dom元素），可以作为模板被插入到页面中。

4.Vue.prototype 添加 Vue 实例方法

源码

vue文件

<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>

confirm.js

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')
});