188 lines
4.3 KiB
Vue
188 lines
4.3 KiB
Vue
<template>
|
||
<view class="msgBox" v-if="Msgboxs.length>0">
|
||
|
||
<MessagePopup v-for="item,index in Msgboxs" :visible="item.showPop" :type="item.popType" :bgColor="item.bgColor"
|
||
:borderColor="item.borderColor" :textColor="item.textColor" :buttonBgColor="item.buttonBgColor"
|
||
:buttonTextColor="item.buttonTextColor" :iconUrl="item.iconUrl" :message="item.message"
|
||
:buttonText="item.buttonText" @buttonClick="okCallback(item,index)" :visiblePrompt="item.visiblePrompt"
|
||
:promptTitle="item.promptTitle" v-model="item.modelValue" @closePop="closePop(item)"
|
||
:buttonCancelText="item.buttonCancelText" :showCancel="item.showCancel" @cancelPop="cancelClick(item,index)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'MsgBox',
|
||
data() {
|
||
return {
|
||
Msgboxs:[]
|
||
}
|
||
},
|
||
methods: {
|
||
//确认按钮事件，如果回调函数返回true,将阻止关闭弹窗
|
||
okCallback(item,index){
|
||
let flag=false;
|
||
if(item.okCallback){
|
||
flag=item.okCallback(item,index)
|
||
}
|
||
|
||
if(flag){
|
||
return;
|
||
}
|
||
this.closePop(item);
|
||
},
|
||
//取消按钮,如果回调函数返回true，将阻止关闭弹窗
|
||
cancelClick(item,index){
|
||
let flag=false;
|
||
if(item.cancelCallback){
|
||
flag=item.cancelCallback(item,index)
|
||
}
|
||
|
||
if(flag){
|
||
return;
|
||
}
|
||
this.closePop(item);
|
||
},
|
||
closePop: function(item) {
|
||
|
||
if (item) {
|
||
this.Msgboxs.find((v, i) => {
|
||
if (item.key === v.key) {
|
||
this.Msgboxs.splice(i, 1);
|
||
}
|
||
});
|
||
|
||
if (item.cancelCallback) {
|
||
item.cancelCallback();
|
||
}
|
||
} else {
|
||
if (this.Msgboxs.length > 0) {
|
||
this.Msgboxs.splice(this.Msgboxs.length - 1, 1);
|
||
}
|
||
|
||
}
|
||
|
||
},
|
||
//根据传入的配置，自定义一个弹窗
|
||
showPop: function(option,isClear) {
|
||
let def = {
|
||
key: '',
|
||
showPop: true, //是否显示弹窗
|
||
popType: 'custom',
|
||
bgColor: '#383934bd',
|
||
borderColor: '#BBE600',
|
||
textColor: '#ffffffde',
|
||
buttonBgColor: '#BBE600',
|
||
buttonTextColor: '#232323DE',
|
||
iconUrl: '',
|
||
message: '',
|
||
buttonText: '确定',
|
||
clickEvt: '',
|
||
visiblePrompt: false,
|
||
promptTitle: '',
|
||
modelValue: '',
|
||
visibleClose: false,
|
||
okCallback: null,
|
||
showSlot: false,
|
||
buttonCancelText: '',
|
||
showCancel: false,
|
||
cancelCallback: null
|
||
}
|
||
let json = {};
|
||
let keys = Object.keys(def);
|
||
|
||
for (let i = 0; i < keys.length; i++) {
|
||
let key = keys[i];
|
||
|
||
json[key] = def[key];
|
||
}
|
||
if (option) {
|
||
keys = Object.keys(option);
|
||
for (let i = 0; i < keys.length; i++) {
|
||
let key = keys[i];
|
||
|
||
json[key] = option[key];
|
||
}
|
||
}
|
||
|
||
if (!json.borderColor) {
|
||
json.borderColor = '#BBE600';
|
||
json.buttonBgColor = '#BBE600';
|
||
}
|
||
json.showPop = true;
|
||
if (!('key' in json)) {
|
||
json.key = new Date().getTime();
|
||
}
|
||
|
||
this.Msgboxs.push(json);
|
||
|
||
return json;
|
||
},
|
||
//弹出预定好的三种弹窗
|
||
showMsg(msg,btnTxt, type,okCallback) {
|
||
|
||
let cfg = {
|
||
error: {
|
||
icoUrl: '/static/images/6155/DeviceDetail/uploadErr.png',
|
||
borderColor: "#e034344d",
|
||
buttonBgColor: "#E03434"
|
||
},
|
||
succ: {
|
||
icoUrl: '/static/images/common/success.png',
|
||
borderColor: "#BBE600",
|
||
buttonBgColor: "#BBE600"
|
||
},
|
||
warn: {
|
||
icoUrl: '/static/images/common/warning.png',
|
||
borderColor: "#FFC84E",
|
||
buttonBgColor: "#FFC84E",
|
||
}
|
||
}
|
||
|
||
if (!type) {
|
||
type = 'error';
|
||
}
|
||
if (!cfg[type]) {
|
||
type = 'error';
|
||
}
|
||
|
||
|
||
let guid = new Date().getTime()+"";
|
||
let options = {
|
||
key: guid,
|
||
message: msg,
|
||
iconUrl: cfg[type].icoUrl,
|
||
borderColor: cfg[type].borderColor,
|
||
buttonBgColor: cfg[type].buttonBgColor,
|
||
buttonText: btnTxt?btnTxt:'确定',
|
||
okCallback: okCallback?okCallback:this.closePop
|
||
};
|
||
return this.showPop(options);
|
||
|
||
},
|
||
//清除所有弹窗
|
||
clearPops(){
|
||
this.Msgboxs=[];
|
||
},
|
||
//获取当前所有弹窗的数量
|
||
getPops(){
|
||
return this.Msgboxs.length;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.msgBox{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|