vue3 + antd实现简单的图片点开可以缩小放大查看

通过ref传参src打开弹窗

点击图片放大

<imgv-if="getFileType(record[column.key]) === '图片'":src="`${defaultBaseURL + record[column.key]}`"class="img-style"@click="handleImgClick(`${defaultBaseURL + record[column.key]}`)"/>// 点击打开图片
function handleImgClick(imgUrl: string) {showImgRef.value.openModel(imgUrl);
}// 引用图片展示组件
<ModelShowImg ref="showImgRef" />

图片展示组件代码

<script lang="ts" setup>
import { ref } from 'vue';import { CloseOutlined } from '@ant-design/icons-vue';const open = ref(false);
const showImg = ref('');
const x = ref(0);
const y = ref(0);
const startx = ref(0);
const starty = ref(0);
const endx = ref(0);
const endy = ref(0);
const height = ref(800);
function closeImg() {showImg.value = '';open.value = false;x.value = 0;y.value = 0;startx.value = 0;starty.value = 0;endx.value = 0;endy.value = 0;height.value = 800;
}
function changeImg(e: any) {if (e.deltaY < 0) {height.value += 80;} else {if (height.value > 80) {height.value -= 80;}}
}
function mousedown(e: any) {startx.value = e.pageX;starty.value = e.pageY;document.addEventListener('mousemove', mousemove);document.querySelector('#imgId')?.addEventListener('mouseup', mouseup);
}
function mousemove(e: any) {x.value = e.pageX - startx.value + endx.value;y.value = e.pageY - starty.value + endy.value;
}
function mouseup() {// 解除绑定mousemovedocument.removeEventListener('mousemove', mousemove, false);endx.value = x.value;endy.value = y.value;
}
function openModel(imgUrl: string) {showImg.value = imgUrl;open.value = true;
}
// 暴露方法给父组件调用
defineExpose({ openModel });
</script>
<template><a-modalv-model:open="open":centered="true":closable="false":footer="null":mask-closable="false"width="100%"wrap-class-name="dialogModalBox"@cancel="closeImg"><imgv-if="showImg"id="imgId":src="showImg":style="{ transform: `translate(${x}px,${y}px)`, height: `${height}px` }"draggable="false"@mousedown="mousedown($event)"@mousewheel="changeImg($event)"/><CloseOutlined class="close" @click="closeImg" /></a-modal>
</template>
<style lang="less">
.dialogModalBox {.ant-modal .ant-modal-content {padding: 0;background-color: rgba(0, 0, 0, 0);display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh;}
}
.close {position: fixed;right: 30px;top: 30px;color: white;font-size: 32px;
}
</style>

效果：点击图片按下可以拖拽，滚轮可以放大缩小图片，右上角X按钮关闭