问题:el-image打开图片预览时,只能点击关闭按钮才能关闭
需求:点击其他地方,方可关闭图片预览
el-image是elementUi里的一个组件,介绍可以直接去element官网查,在这里就不多介绍了
以下是el-image的基础配置:
而这里最重要的也就是这个handleClickStop方法了,@click.stop点击调用方法关闭
以下是handleClickStop的代码:
handleClickStop() {
this.$nextTick(() => {
let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
if (!domImageView) {
return;
}
domImageView.addEventListener("click", () => {
// 点击遮罩层时调用关闭按钮的 click 事件
document.querySelector(".el-image-viewer__close").click();
});
});
},
这样就完成了el-image点击蒙版也可以关闭的操作了
注:看到这了,点个小赞再走呗~,谢谢支持~