WechatApp/components/Modal/BasicModal.vue

<template>
	<uni-popup v-bind="$attrs" ref="popup" @change="handleChange" :is-mask-click="isMack" :safe-area='false'>
		<slot></slot>
	</uni-popup>
</template>

<script setup>
	import { ref, computed, unref, watch, nextTick } from 'vue';
	const props = defineProps({
		open: { type: Boolean, default: false },
		isMack: { type: Boolean, default: true }
	})
	const emit = defineEmits(['update:open'])
	const popup = ref()
	
	const getOpen = computed({
		get: () => props.open,
		set: val => emit('update:open', val)
	})
	
	watch(getOpen, (v) => {
		nextTick(() => {
			const p = unref(popup);
			if (!p) return;
			v ? p.open() : p.close();
		});
	}, { flush: 'post', immediate: true })
	
	function handleChange({ show }){
		getOpen.value = show
	}
	
</script>

<style scoped lang="scss">
/* 高于 TabBar(z-index:99)，弹窗盖住底部导航 */
:deep(.uni-popup) {
	z-index: 99999 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}
:deep(.uni-popup__wrapper) {
	z-index: 99999 !important;
}
</style>