<template>
	<!-- 蒙层 -->
	<view v-if="modelValue" @click="modelValue = false" class="mask flex-c-c" @touchmove.stop>
		<image :src="props.imgUrl" mode="widthFix"></image>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits, computed } from 'vue';

	const props = defineProps({
		// 是否显示
		modelValue: {
			type: Boolean,
			requird: true
		},
		// 图片地址
		imgUrl: {
			type: String,
			requird: true
		}
	})

	const $emit = defineEmits(['update:modelValue'])

	const modelValue = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			$emit('update:modelValue', value)
		}
	})
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100vw;
		height: 100vh;

		image {
			width: 100%;
		}
	}
</style>