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>
/**
 * 遮罩组件
 * @description 遮罩组件
 * @property {Boolean} blurable 毛玻璃效果
 * @property {Number} zIndex 层级
 * @property {Boolean} maskClickable 点击遮罩是否可关闭
 * @property {Boolean} bgColor 背景色
 * @event {Function} close 关闭事件
 */
export default {
	name: 'fs-mask'
}
</script>

<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>