Element 中图片预览后如何快速关闭

Element 中的图片有预览大图的功能，但是预览完毕后只能点击右上角的关闭图标才能关闭，有点不方便

mounted() {// 通过遮罩层关闭图片预览document.addEventListener('click',function(e){if(e.target.className=="el-image-viewer__mask"){let close = document.querySelector(".el-icon-circle-close");close.click();}});
},

Element 中图片预览后如何快速关闭相关推荐

VUE-使用element实现图片预览功能
业务逻辑描述: 获取图片成功时,图片展示,可点击进行预览:获取失败时,图片显示默认的,不可点击不能预览: 点击哪张图片,预览时这张图片显示在第一个,点击左右键可滑动查看图片: 成功时: 失败 ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
angular中封装fancyBox(图片预览)
首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接:http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然 ...
如何在macos电脑中使用预览将图片变为黑白？
1.找到需要编辑的图片: 2.右键点击图片,选择"打开方式"然后选择"预览": 3.点击屏幕顶部菜单栏中的"工具",在下拉菜单中选择&quo ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
.md文件中插入本地图片并显示图片预览
文章目录前言一.图片文件上传到gitee图片仓库 1:获取图片网址 (1).注册gitee,建立gitee图片仓库 (2)上传图片至gitee图片仓库 2.修改图片网址,插入到md文件中并预览 ( ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
layui数据表格中展示图片及图片预览
在项目中遇到数据表格中放入图片同时可以点击放大预览.预览方式我才用的是layer方式.代码如下: layui.use('table', function(){var table = layui.tab ...
vue3,电商项目中的商品详情-图片预览组件
目的:完成商品图片预览功能和切换分享一个vueuse的插件useMouseInElement useMouseInElement的官方文档 // 监听DOM元素 target 绑定的DOM元素中鼠标 ...

Element 中图片预览后如何快速关闭

Element 中图片预览后如何快速关闭相关推荐

最新文章

热门文章