fs-uni-template/components/fs-mask/fs-mask.vue

<template>
	<view
		class="fs-mask"
		:class="{'fs-mask-blur': blurable}"
		:style="{'zIndex': zIndex}" 
		v-if="modelValue" 
		@click="handleMask">
	</view>
</template>

<script setup>
const props = defineProps({
	modelValue: Boolean,
	blurable: Boolean,
	zIndex: {
		type: Number,
		default: 899
	},
	maskClickable: {
		type: Boolean,
		default: true
	},
	bgColor: {
		type: String,
		default: 'rgba(0, 0, 0, 0.5)'
	}
})
const emits = defineEmits(['update:modelValue','close'])

const handleMask = () => {
	if (props.maskClickable) {
		emits('update:modelValue', false)
		emits('close')
	}
}
</script>

<style lang="scss">
.fs-mask{
	position: fixed;
	top: var(--window-top);
	right: 0;
	bottom: var(--window-bottom);
	left: 0;
	background-color: v-bind(bgColor);
	
	&-blur{
		backdrop-filter: blur(12rpx);
	}
}
</style>