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"
			:showHeader="item.showHeader" :headerTxt="item.headerTxt"
		
			@cancelPop="cancelClick(item,index)" />
	</view>
</template>

<script>
	import Common from '@/utils/Common.js'
	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) {
				debugger;
				if (item) {
					this.Msgboxs.find((v, i) => {
						debugger;
						if (item.key && v.key) {
							if (item.key === v.key) {
								this.Msgboxs.splice(i, 1);
								return true;
							}
						}

					});

					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,
					visible:false,
					promptPlaceholder:'',
					type:'custom',
					showHeader:false,
					headerTxt:''
				}
				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) {
					Object.assign(json, option);
				}

				if (!json.borderColor) {
					json.borderColor = '#BBE600';
					json.buttonBgColor = '#BBE600';
				}
				json.showPop = true;
				
				
				if(!json.key){
					json.key =Common.guid();
				}

				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 =Common.guid();
				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: 99999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>