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

来源：互联网发布：sql更新字段部分值编辑：程序博客网时间：2024/06/06 19:29

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

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>

阅读全文

1 0