vue 组件多消息提示框

 1 .popup_right_bottom{position: fixed; width:400px; height: auto; bottom: 10px; right: 10px; z-index:100; background-color: #ccecfb; border: 2px solid #419cc3; padding: 12px;}
 2 .popup_child{position: relative; margin-bottom: 2px; padding: 8px; opacity:1; transition: all .5s ease-out; cursor: pointer;}
 3 .popup_child:last-child{margin-bottom: 0px;}
 4 /*.popup_child:hover{opacity:0;}*/
 5 .popup_child2{opacity:0;}
 6 
 7 .message_popup_ok{color:#66c546; background-color: #eff8eb; border:2px solid #66c546; }
 8 .message_popup_error{color:#f57572; background-color: #fdf0ef; border: 2px solid #f57572; }
 9 .message_popup_M{color:#95979d; background-color:#edf1fb; border: 2px solid #95979d;}
10 .message_popup_warning{color: #e5a846; background-color:#fcf5ec; border: 2px solid #e5a846;}
11 .message_popup_close{position: absolute; right: 5px; top:-2px; color: #ccc; cursor: pointer;opacity:1; transition: none;}
12 .message_popup_close2{opacity:0;}
13 .message_popup_close:hover{color:#f44336;}
14 
15 /*vue组件多消息提示框动画效果  可以设置不同的进入和离开动画 设置持续时间和动画函数 */
16 .slide-fade-enter-active {
17     transition: all .3s ease;
18 }
19 .slide-fade-leave-active {
20     transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
21 }
22 .slide-fade-enter{
23     transform: translateX(10px);
24     opacity: 0;
25 }
26 .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ {
27     transform: translateY(-10px);
28     opacity: 0;
29 }

/*多消息调用方式*/
//调用方式1 this.successNew(‘揭发话，你学会了吗？‘);
//调用方式1this.messageNew({"msg":‘揭发话，你学会了吗？‘,‘callBack‘:this.test});
//参数 callBack 是回调函数
//多条信息提示框
!function ($) {
     const TYPE = {
        _success : {
            _class : ‘message_popup_ok popup_child‘,
            _i : ‘fas fa-times message_popup_close‘
        },
        _warning : {
            _class : ‘message_popup_warning popup_child‘,
            _i : ‘fas fa-times message_popup_close‘
        },
        _error : {
            _class : ‘message_popup_error popup_child‘,
            _i : ‘fas fa-times message_popup_close‘
        },
        _default : {
            _class : ‘message_popup_M popup_child‘,
            _i : ‘fas fa-times message_popup_close‘
        }
    },
    MESSAGE = {
            name : ‘kintech-multipleMessage‘,
            /*props: {
                messageArr2: {
                    type: Array,
                    required: true
                }
            },*/
            data : function() {
                return {
                    show : true,/*messageArr:this.messageArr2,*/
                    messageArr:[],
                }
            },
            beforeMount : function() {},
            mounted : function() {},
            computed: {
                isPop:{
                    get:function () {
                        let flag = false
                        for (let i in this.messageArr) {
                            let message = this.messageArr[i]
                            if (message.isShow==‘‘) {//但凡有一条消息是显示的，那么整个消息弹出div都必须显示出来
                                flag = true
                                break
                            }
                        }
                        return flag;
                    },
                    set:function (newValue) {

                    }
                }
            },
            watch : {},
            methods : {
                delCall : function(item,index) {
                    if (item.isShow==‘‘) {
                        // let tClass = item.type._class.replace("popup_child","popup_child2")
                        // item.type._class=tClass
                        item.isShow=‘none‘
                    }
　　　　　　　　　　　　// 执行回调函数　　
                    if (item.callBack && (typeof item.callBack === ‘function‘)) item.callBack(index,item) ;
                },
            },
            template:‘<div v-show="isPop" class="popup_right_bottom" style="border: 0px;background-color: transparent;">‘ +
                ‘        <transition-group name="slide-fade"><div :key="index" :class="item.type._class" v-show="item.isShow==\‘\‘"  v-for="(item,index) in messageArr">{{item.msg}}‘ +
                ‘            <i @click="delCall(item,index)" :class="item.type._i">X</i>‘ +
                ‘        </div></transition-group>‘ +
                ‘    </div>‘
    };

    MESSAGE._init = function(content,typeClass) {
        let model = {}
        switch (typeof content) {
            case ‘undefined‘:
                model = {};
                break;
            case ‘object‘:
                model = content;
                break;
            case ‘string‘:
                model = {"msg":content}
                break;
        }
        model.time = model.time || 3000//消息关闭的时间
        model.isShow = model.isShow || ‘‘
        model.type = typeClass || JSON.parse(JSON.stringify(TYPE._default))//消息关闭是的动画效果，以及样式
        if ($.prototype._multipleMessageList) {
            $.prototype._multipleMessageList.push(model)
        }else {
            $.prototype._multipleMessageList = [model]
        }
        setTimeout(function(){
            if (model.isShow==‘‘) {
                //这里的动画样式可以不加了，因为用到了vue组件里面封装的css过度效果,但是你自己初始的css属性里面一定要有动画属性，否则vue是不会给你添加过度样式（动画）效果的
                // let tClass = model.type._class.replace("popup_child","popup_child2")
                // let iClass = model.type._i.replace("message_popup_close","message_popup_close2")
                // model.type._class = tClass
                // model.type._i = iClass
                model.isShow = ‘none‘
　　　　　　　　　　// 执行回调函数
                if (model.callBack && (typeof model.callBack === ‘function‘)) model.callBack(null,model) ;
            }
        },model.time);
        if (document.querySelector(‘.popup_right_bottom‘)) {
            // console.log("DOM已经存在！")
        }else {
            let _message = $.extend(MESSAGE),
                _component = new _message({
                    // 这种方式是把值传到props里面去
                    /*propsData: {
                        messageArr2: $.prototype._multipleMessageList
                    }*/
                    // 这种方式是把值直接传到data里面去
                    data :{
                        messageArr: $.prototype._multipleMessageList
                    }
                }).$mount();
            // 把生成的提示的dom插入body中
            document.querySelector(‘body‘).appendChild(_component.$el);
            return _component
        }
    };

    $.component(MESSAGE.name, MESSAGE);
　　// 对外暴露四个方法，方便应对不同消息调用不同方法
    $.prototype.successNew = function(content) {
        return MESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._success)));
    };
    $.prototype.warningNew = function(content) {
        return MESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._warning)));
    };
    $.prototype.errorNew = function(content) {
        return MESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._error)));
    };
    $.prototype.messageNew = MESSAGE._init;

    /*$.prototype.multipleMessage = function(content) {
        return MESSAGE._init(content);
    };*/

}(Vue)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <link href="css/pages.css" rel="stylesheet" type="text/css">
 6         <script src="js/vue.min.js"></script>
10         <script src="js/plugins-config.js"></script>
11         <title></title>
12     </head>
13     <body>
14         <div id="app">
15             <button type="button" @click="addMessage">添加消息</button>
16             <button type="button" @click="addMoreMessage">弹出多条消息</button>
17         </div>
18         
19         <script>
20             (function($$){
21                 let vm = new $$({
22                         el: ‘#app‘,
23                         data:{},
24                         created:function (){},
25                         watch:{},
26                         mounted : function() {},
27                         methods: {
28                             addMessage : function () {
29                                 this.successNew({"msg":‘年轻人不讲武德 来，偷袭‘,‘time‘:5000,‘callBack‘:this.test});
30                             },
31                             addMoreMessage : function () {
32                                 this.errorNew(‘偷袭我这个69岁的老同志偷袭我这个69岁的老同志偷袭我这个69岁的老同志偷袭我这个69岁的老同志偷袭我这个69岁的老同志偷袭我这个69岁的老同志‘);
33                                 this.messageNew({"msg":‘来，偷袭‘,‘time‘:10000,‘callBack‘:this.test});
34                                 this.successNew({"msg":‘年轻人不讲武德 来，偷袭‘,‘time‘:5000,‘callBack‘:this.test});
35                                 this.warningNew("我劝你耗子尾汁");
36                             },
37                             test :function (index,item) {
38                                 console.log(‘回调函数:‘+index)
39                                 console.log(item)
40                             }
41                         }
42                 });
43             })(Vue)
44         </script>
45     </body>
46 </html>