vue 一个组件内多个弹窗_vue组件多消息弹出提示框

/*多消息调用方式*/

//调用方式1. this.successNew('揭发话，你学会了吗？');//调用方式2. this.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}

}returnflag;

},

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

' +

'

{{item.msg}}' +

' X' +

'

' +

'

'};

MESSAGE._init= function(content,typeClass) {

let model={}switch (typeofcontent) {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) {returnMESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._success)));

};

$.prototype.warningNew= function(content) {returnMESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._warning)));

};

$.prototype.errorNew= function(content) {returnMESSAGE._init(content, JSON.parse(JSON.stringify(TYPE._error)));

};

$.prototype.messageNew=MESSAGE._init;/*$.prototype.messageNew = function(content) {

return MESSAGE._init(content);

};*/}(Vue)