APP/components/MsgBox/MsgBox.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>