Advertisement

el-image图片放大后关闭事件

阅读量:

el-image组件的放大功能是通过其独立的el-image-viewer组件实现的,那么如何在el-image中调用该组件的方法呢?从源码可以看出,存在一个关闭时的回调函数closeViewer,该函数内部通过showViewer属性来控制图片放大视图的显示与隐藏。因此,我们只需对子组件中的showViewer属性进行监听即可。

在这里插入图片描述
在这里插入图片描述

然而实际情况并未如预期般顺利,采用该监听子组件的方式存在一定的局限性,因此决定暂时搁置。
接下来尝试转变策略,既然最终操作为点击行为,那么可以直接对DOM元素的点击事件进行监听,只要对关闭按钮和遮罩层分别设置相应的响应机制即可。

复制代码
    this.$nextTick(() => {
      let wrapper = document.querySelector(".el-image-viewer wrapper");

全部评论 (0)

还没有任何评论哟~