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();
   });
 },
相关推荐
A黄俊辉A3 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
honkun63 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19913 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net
雪芽蓝域zzs3 天前
第26章:ECharts 自定义主题 + 页面一键切换主题(深色 / 浅色两套)
vue.js·echars
雪芽蓝域zzs3 天前
第22章:ECharts 图表联动(多图表交互联动)
vue.js·echars
daols883 天前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载
vue.js·vxe-table
雪芽蓝域zzs3 天前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip
vue.js·echars