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

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

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

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 el-image 上添加关闭按钮,您可以使用 el-dialog 组件或自定义样式来实现。以下是两种方法: 方法一:使用 el-dialog 组件 1. 在 el-dialog 组件中使用 el-image,将其作为弹窗内容。 2. 在 el-dialog 的标题栏中添加一个关闭按钮点击按钮关闭弹窗。 示例代码如下: ```html <template> <div> <el-dialog :visible.sync="dialogVisible" title="图片预览" width="50%"> <el-image src="your_image_url"></el-image> </el-dialog> <!-- 触发弹窗的按钮 --> <el-button @click="openDialog">打开弹窗</el-button> </div> </template> <script> export default { data() { return { dialogVisible: false } }, methods: { openDialog() { this.dialogVisible = true; } } } </script> ``` 方法二:自定义样式 1. 在 el-image 外部包裹一个容器元素,用于放置关闭按钮。 2. 通过 CSS 样式来定位和显示关闭按钮点击按钮时隐藏 el-image。 示例代码如下: ```html <template> <div class="image-container"> <el-image src="your_image_url"></el-image> <!-- 关闭按钮 --> <span class="close-button" @click="closeImage"></span> </div> </template> <style> .image-container { position: relative; display: inline-block; } .close-button { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url('close_button.png') no-repeat center center; cursor: pointer; } </style> <script> export default { methods: { closeImage() { // 隐藏 el-image // ... } } } </script> ``` 请根据您的实际需求选择适合的方法,并根据实际情况进行相应的调整和样式修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值