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();
   });
 },
相关推荐
_xaboy3 分钟前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
openKaka_16 分钟前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js
zithern_juejin39 分钟前
typeof、instanceof与Object.prototype.toString()
javascript
Highcharts.js1 小时前
Highcharts React v5升级三问|最大的升级方向是什么?需要注意什么?有什么优化?
前端·javascript·react.js·前端框架·highcharts·大数据渲染·前端性能
马玉霞1 小时前
vue web端页面组件展示
前端·vue.js
129y1 小时前
JS入门参考:引擎、作用域与let/const,一起慢慢理解~
javascript
代码煮茶1 小时前
Vue3 权限系统实战 | 从 0 搭建完整 RBAC 权限管理
前端·javascript·vue.js
前端小木屋1 小时前
Node基础入门
javascript·node.js
阳火锅1 小时前
💡 告别类名地狱!Tailwind CSS 语义化转换神器来了
前端·css·vue.js
用户125758524362 小时前
XYGo Admin 即时通讯与异步任务实战:WebSocket 长连接 + 消息队列驱动后台处理
vue.js