elmentui 查看大图组件 点击图片关闭弹窗方法

elmentui 查看大图组件 点击图片关闭弹窗方法

html

html 复制代码
 <el-image
          ref="Imgs"
          :src="item.url ? item.url : ' '"
          :preview-src-list="item.url ? [item.url] : []"
          @click.stop="handlePreviewClose"
          class="alarm_img"
        />

js

javascript 复制代码
 //图片预览关闭
 async handlePreviewClose() {
   await this.$nextTick();
   //获取ui库弹出的dom
   let domImageMask = document.querySelector(".el-image-viewer__img");
   if (!domImageMask) {
     return;
   }
   //模拟点击右上角的close
   domImageMask.addEventListener("click", () => {
     document.querySelector(".el-image-viewer__close").click();
   });
 },
相关推荐
API技术员15 分钟前
item_get_app - 根据ID取商品详情原数据H5数据接口实战解析
javascript
八哥程序员15 分钟前
Chrome DevTools 详解系列之 Elements面板
javascript·浏览器
coderHing[专注前端]20 分钟前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
UIUV36 分钟前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo10037 分钟前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
San3043 分钟前
从零到一:彻底搞定面试高频算法——“列表转树”与“爬楼梯”全解析
javascript·算法·面试
JellyDDD1 小时前
h5上传大文件可能会导致手机浏览器卡死,重新刷新的问题
javascript·上传文件
爱分享的鱼鱼2 小时前
对比理解 Vue 响应式 API:data(), ref、reactive、computed 与 watch 详解
前端·vue.js
JS_GGbond2 小时前
【性能优化】给Vue应用“瘦身”:让你的网页快如闪电的烹饪秘籍
前端·vue.js
T___T2 小时前
一个定时器,理清 JavaScript 里的 this
前端·javascript·面试