7、vue2.0用Vue.extend构建消息提示组件的方法实例实现alert模态框组件（2）

话不多说直接上源码 喜欢的点赞哦

alert.vue组件

<style>
    .header{
        font-size:0.85rem;margin:0 0 0 0;margin-top:1.3rem;
    }
    .message{
        font-size:0.8rem;color: #333;margin:0; padding:0.45rem 0.75rem 1.3rem 0.75rem; line-height:1.2rem
    }
</style>
<template>
    <div class="fd_alert">
        <div class="mask" style="opacity:0.2;" v-if="visible">
        </div>
        <div class="alert" v-if="visible">
            <p class="message">{{message}}</p>
            <div class="btn-group ">
                <button class="btn secondary" @click="handleActions('cancel')">{{cancelButtonText}}</button><button class="btn secondary" @click="handleActions('confirm')">{{confirmButtonText}}</button>
            </div>
        </div>
    </div>
</template>
<script>
    var CONFIRM_TEXT = '确定';
    var CANCEL_TEXT = '取消';
    export default{
        name:'Alert',
        props:{
            confirmButtonText: {   // 可选字段，有默认值
                default: CONFIRM_TEXT
            },
        },
        methods:{
            handleActions(action){
                var callback = this.callback;
                this.visible = false;
                callback(action);
            }
        },

        data(){
            return{
                message:'',
                cancelButtonText:CANCEL_TEXT ,
                visible :true,
                duration:"",
                callback:null
            }
        },

    }
</script>

alert.js

const CONFIRM_TEXT = '确定';
const CANCEL_TEXT = '取消';

var defaults = {
    title: '',
    message: '',
    confirmButtonText: CONFIRM_TEXT,
    cancelButtonText: CANCEL_TEXT,
    btn:true,
    cancelButtonShow:true,
    btnwidth:"50%",
    duration:"3000",
    num:"",
    activeColor: '#ff8208',
    showCancelButton:true
};

import Vue from 'vue';
import alertvue from './alert.vue';

var merge = function(target) {
    for (var i = 1, j = arguments.length; i < j; i++) {
        var source = arguments[i];
        for (var prop in source) {
            if (source.hasOwnProperty(prop)) {
                var value = source[prop];
                if (value !== undefined) {
                    target[prop] = value;
                }
            }
        }
    }
    return target;
};

var alertConstructor = Vue.extend(alertvue);

var currentMsg, instance,duration;
var msgQueue = [];

var initInstance = function() {
    instance = new alertConstructor({
        el: document.createElement('div')
    });

    instance.callback = function(action) {
        var callback = currentMsg.callback;
        callback(action);
    };
};


var showNextMsg = function(options) {



    initInstance();


    if (msgQueue.length > 0) {
        currentMsg = msgQueue.shift();

        var options = currentMsg.options;
        for (var prop in options) {
            if (options.hasOwnProperty(prop)) {
                instance[prop] = options[prop];
            }
        }
        if(!options.btn){

            duration  = options.duration
        }


        // instance.$appendTo(document.body);
        document.body.appendChild(instance.$el);

        Vue.nextTick(() => {
            instance.visible = true;
            if(!options.btn){
                setTimeout(()=>{
                    instance.$remove();
                    var callback = currentMsg.callback;
                    callback("duration");
                },duration)
            }
        });
    }

};

var alert = function(options, callback) {
    msgQueue.push({
        options: merge({}, defaults, alert.defaults || {}, options),
        callback: callback
    });
    showNextMsg(options);
};

export default alert;
export { alert };

父组件页面

<template>
    <div @click='fd_alert'>alert</div>
</template>
<script>
    import Alert from '../components/alert/alert.js'
    export default{
        data(){
            return{

            }
        },
        methods:{
            fd_alert(){
                var vm = this;
                Alert({
                    confirmButtonText:'否',
                    cancelButtonText:'是',
                    message: '是否确认删除',
                    handleActions:function (key) {
                        this.visible = false;
                        if(key=='cancel'){
                            vm.cancel();
                        }else if(key == 'confirm'){
                            vm.confirm();
                        }
                    }
                });
            },
            cancel(){
                alert('是');
            },
            confirm(){
                alert('否')
            }
        }
    }
</script>
<style>

</style>