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);
我没找到什么更好的方法,只能通过判断是否在图片上触发滚动事件,保存每次图片的样式,如果不是图片上触发的事件,将样式恢复。