You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
903 B
52 lines
903 B
9 months ago
|
<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>
|