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 } 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) => {
		v && unref(popup).open()
		!v && unref(popup).close()
	})
	
	function handleChange({ show }){
		getOpen.value = show
	}
	
</script>

<style scoped lang="scss">
:deep(.uni-popup) {
	z-index: 1000 !important;
}
</style>