uniapp 全局挂载弹窗组件（app、h5）

自定义标题栏 在标题栏里写弹窗组件，每个页面都会引入标题栏所以每个页面都可以调用

标题栏组件

<u-modal 
    ref="errModal"
	:show="modalShow"
	:title="modalTitle"
	:showCancelButton="showCancelButton"
	:cancelText="cancelText"
	:confirmText="confirmText"
	@confirm="modalConfirm"
	@cancel="modalCancel"
>
	<view class="slot-content">
		{{ modalMsg }}
	</view>
</u-modal>

data(){
	return {
		safetySize:{
			top:0,
			bottom:0,
			left:0,
			right:0
		},
		modalShow: false,
		modalTitle: this.$t('提示'),
		modalMsg: '',
		showCancelButton: false,
		cancelText: this.$t('取消'), 
		confirmText: this.$t('确认'),
		confirmDone: null, // 点击确认回调事件
		cancelDone: null, // 点击取消回调事件
		keyAction: true,
		pageId: uuid(12) // 当前页面ID
	}
},
mounted() {
	const that = this
	// 页面栈
	let pageStack = getApp().globalData.pageStack || []
	if ((typeof pageStack) == 'function') {
		pageStack = []
	}
	// 当前页面对象
	let currentPage = {
		id: this.pageId,
		page: that,
		toast: that.$refs.uToast,
		showModal: function(msg) {
			let config = {
				title: '提示',
				cancelText: '取消',
				confirmText: '确认',
				showCancelButton: false,
				confirm: null
			}
			if (typeof msg === 'object') {
				config = {
					...config,
					...msg
				}
				msg = config.msg
			}
			that.modalShow = true
			that.showCancelButton = config.showCancelButton
			that.modalTitle = config.title || that.$t('提示')
			that.cancelText = config.cancelText || that.$t('取消')
			that.confirmText = config.confirmText || that.$t('确认')
			that.modalMsg = msg || that.$t('提示内容')
			that.confirmDone = config.confirm
			that.cancelDone = config.cancel
			that.$forceUpdate();
		}
	}
	// 页面入栈
	pageStack.push(currentPage)
	getApp().globalData.pageStack = pageStack
	// 挂载全局方法
	getApp().globalData.showModal = function(config) {
		let pageStack = getApp().globalData.pageStack || []
		let page = pageStack?.[pageStack.length - 1] || null
		if (!page) {
			return
		}
		page.showModal(config)
	}
},
beforeDestroy() {
	let pageStack = getApp().globalData.pageStack || []
	if (!pageStack.length) {
		return
	}
	const that = this
	let index = pageStack.findIndex(item => item.id === that.pageId)
	if (index < 0) {
		return
	}
	pageStack.splice(index, 1)
},
methods: {
	modalConfirm() {
		this.modalShow = false
		this.confirmDone && this.confirmDone()
	},
	modalCancel() {
		this.modalShow = false
		this.cancelDone && this.cancelDone()
	},
	keypress(e) {
		let pageStack = getApp().globalData.pageStack || []
		let pageId = pageStack[pageStack.length - 1].id
		if (pageId !== this.pageId) {
			return
		}
		if (e.keyCode === 66 || e.key === 'Enter') {
			if(this.modalShow){
				this.modalConfirm()
			}else{
				// uni.$emit('keypressEnter')
			}
		}
	},

},

调用

getApp().globalData.showModal({
  msg: this.$t("是否确认下架"),
  title: this.$t('提示'),
  cancelText: this.$t('取消'),
  confirmText: this.$t('下架'),
  showCancelButton: true,
  confirm: function() {
	// 点击确认按钮回调
  },
  cancel: function() {
	// 点击确认取消回调
  }
})