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