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.
88 lines
1.8 KiB
88 lines
1.8 KiB
<!--
|
|
图片预览组件
|
|
|
|
使用方法：
|
|
<ImagePreview
|
|
:visible="showImagePreview"
|
|
:image-url="previewImageUrl"
|
|
@close="showImagePreview = false"
|
|
/>
|
|
|
|
参数说明：
|
|
- visible: 控制组件显示/隐藏
|
|
- image-url: 要预览的图片URL
|
|
- @close: 关闭事件回调
|
|
|
|
特性：
|
|
- 响应式设计
|
|
- 支持点击遮罩关闭
|
|
- 可复用于多个页面
|
|
-->
|
|
|
|
<template>
|
|
<div
|
|
v-if="visible"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
|
|
@click="handleBackdropClick"
|
|
>
|
|
<!-- 关闭按钮 - 固定在视口上 -->
|
|
<div class="fixed top-4 right-10 z-[60]">
|
|
<el-button :icon="Close" circle @click="handleClose"/>
|
|
</div>
|
|
|
|
<div class="relative max-w-[90vw] max-h-[90vh] overflow-auto">
|
|
<!-- 图片容器 -->
|
|
<div class="relative">
|
|
<img
|
|
:src="imageUrl"
|
|
:alt="imageAlt"
|
|
class="max-w-full object-contain rounded-lg shadow-2xl"
|
|
@click.stop
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, defineEmits } from 'vue'
|
|
import {
|
|
Close
|
|
} from '@element-plus/icons-vue'
|
|
// 定义组件属性
|
|
interface Props {
|
|
visible: boolean
|
|
imageUrl: string
|
|
imageAlt?: string
|
|
}
|
|
|
|
// 定义组件事件
|
|
interface Emits {
|
|
(e: 'close'): void
|
|
}
|
|
|
|
// 接收属性
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
imageAlt: '图片预览'
|
|
})
|
|
|
|
// 定义事件
|
|
const emit = defineEmits<Emits>()
|
|
|
|
// 处理关闭事件
|
|
const handleClose = () => {
|
|
emit('close')
|
|
}
|
|
|
|
// 处理背景点击事件
|
|
const handleBackdropClick = (event: Event) => {
|
|
// 只有点击背景遮罩时才关闭，点击图片本身不关闭
|
|
if (event.target === event.currentTarget) {
|
|
handleClose()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可以添加自定义样式 */
|
|
</style>
|