elementui实现预览图片组件二次封装

在elementui组件库中，el-image组件有个预览图片功能，比较简洁，但是和图片绑定在一起，我们只想要一个单纯的预览组件，传递一个图片，通过事件方式，显示大图

通过查看elementui的代码，发现在image（el-image组件）目录中里面有一个image-viewer组件, el-image组件的预览功能也是通过这一个组件实现的，只是官方没有把这个组件单独暴露出来

这里就比较简单了，我们可以使用手动导入组件的方式，引入image-viewer组件

这里大概做了三件事

• 组件方式导入element的image-viewer组件
• 使用$attrs和$listeners把上层的属性和方法，原封不动传递给image-viewer组件，不用手动处理属性和方法，除非添加额外的功能
• 修改关闭按钮的样式

::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}

上面封装以后，可以很简单使用图片预览，美中不足的是，点击遮罩层，无法关闭大图预览，只能点击右上角关闭按钮，才会关闭预览，使用上不太方便

在查看image-viewer组件的源码发现，关闭按钮绑定hide方法，用于关闭预览的，但是遮罩层没有绑定任何方法，遮罩层也没有对外暴露任何方法调用，难受~

• 先获取image-viewer组件
• 随后获取到遮罩层元素，给遮罩层绑定一个方法，点击时候，就调用image-viewer组件里的hdie方法，达到关闭的目的
• 在卸载组件的时候，移除之前给遮罩层绑定的方法
• 点击遮罩关闭预览，对外暴露一个标志，控制是否点击遮罩关闭预览
  

完整代码如下：

::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}

查看在线示例

以上就是elementui实现预览图片组件二次封装的详细内容，更多关于elementui 预览图片组件二次封装的资料请关注考高分网其它相关文章！