7. vue2.0 using Vue.extend to construct a method instance of the message prompt component implement alert modal box assembly (2)

Words do not say more directly on the source like the point of praise OH

Alert.vue components

<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.45REM0.75REM1.3REM0.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 = ' OK ';
    var cancel_text = ' Cancel '; Export default{name: ' Alert ', props:{confirmbuttontext: {//optional field with default value DEFA Ult:confirm_text}, methods:{handleactions (action) {var callb
                ack = This.callback;
                This.visible = false;
            Callback (action);  }}, data () {return{message: ', Cancelbuttontext:cancel_text

    , Visible:true, Duration: "", Callback:null}}, } </script>

Alert.js

Const CONFIRM_TEXT = ' OK ';

Const Cancel_text = ' Cancel ';
    var defaults = {title: ', Message: ', Confirmbuttontext:confirm_text, Cancelbuttontext:cancel_text,
    Btn:true, Cancelbuttonshow:true, btnwidth: "50%", Duration: "The", 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};

Parent Component Page

<template> <div @click ='Fd_alert'>alert</div> </template> <script> import alert from '. /components/alert/alert.js ' Export default{data () {return{}}, Meth
                ods:{Fd_alert () {var vm = this; Alert ({confirmbuttontext: ' No ', Cancelbuttontext: ' Yes ', message:
                        ' Confirm Delete ', handleactions:function (key) {this.visible = false;
                        if (key== ' Cancel ') {Vm.cancel ();
                        }else if (key = = ' confirm ') {vm.confirm ();
            }
                    }
                });
            }, Cancel () {alert (' yes '); }, confirm () {alert (' No ')}}} </script> <style> </sty Le>