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();
   });
 },
相关推荐
读忆几秒前
在前端开发中使用组件后, 若是出了bug, 应该如何排查, 怎么排查, 解决方式是什么?
前端·javascript·vue.js·bug
Aevget3 分钟前
界面控件DevExpress JS & ASP.NET Core v25.2新版亮点 - AI驱动扩展功能升级
javascript·asp.net·界面控件·devexpress·ui开发
HWL56797 分钟前
uni-app的生命周期
前端·vue.js·uni-app
李剑一10 分钟前
别再瞎写 Cesium 可视化!热力图 + 四色图源码全公开,项目直接复用!
前端·vue.js·cesium
SuperEugene11 分钟前
Vue3 + Vue Router + Pinia 路由守卫规范:beforeEach 应做 / 不应做,避死循环、防重复请求|状态管理与路由规范篇
开发语言·前端·javascript·vue.js·前端框架
东东__net16 分钟前
js逆向与谷歌加密库
开发语言·前端·javascript
m0_5027249525 分钟前
腾讯地图tlbs-multi-marker动态更新marker图标
前端·javascript·vue.js·地图
itjinyin25 分钟前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
Alan Lu Pop44 分钟前
React 表单提交关键词意外触发刷新
前端·javascript·react.js
我命由我123451 小时前
React - 创建 React 项目、React 项目结构、React 简单案例、TodoList 案例
前端·javascript·react.js·前端框架·ecmascript·html5·js