使用element的图片预览工具

html

<el-image-viewer ref="imageView" :zIndex="Number(9999)" :url-list="[viewPicUrl]" @close="hdlClose" />

我看很多地方都用的是on-close，我这边只能用@click，可能版本不同，看情况使用吧。

js

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

如果是element-ui需添加引入组件，我自己用的是element-plus无需引入

滚动问题

我这边底图是地图，也会用鼠标滚轮滚动的事件触发，发现在我缩放地图时，图片也会有缩放效果。

解决方案

const onmousescroll = (e: any) => {
	const obj = document.elementFromPoint(e.clientX, e.clientY);
    dom = document.querySelector('.viewPic-container .el-image-viewer__img');
	if (!obj?.classList.contains('el-image-viewer__img')) {
        dom?.setAttribute('style', style)
	} else {
        style = dom?.getAttribute('style');
    }
};
window.addEventListener('mousewheel', onmousescroll, false);

我没找到什么更好的方法，只能通过判断是否在图片上触发滚动事件，保存每次图片的样式，如果不是图片上触发的事件，将样式恢复。