解决el-image只能点击关闭按钮才能关闭的问题

最新推荐文章于 2024-07-24 15:48:10 发布

wimpyKid0975

最新推荐文章于 2024-07-24 15:48:10 发布

阅读量3.1k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/chenZH0975/article/details/126835229

本文介绍了如何在使用Element UI的el-image组件时，实现点击图片预览的蒙版层即可关闭预览的功能。通过监听遮罩层的点击事件，并模拟关闭按钮的点击操作，实现了这一需求。代码示例展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：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点击蒙版也可以关闭的操作了

注：看到这了，点个小赞再走呗~，谢谢支持~