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


Posted in Javascript onDecember 29, 2020

起因

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

分析

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

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

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

image-viewer组件二次封装

这里大概做了三件事

  • 组件方式导入element的image-viewer组件
  • 使用$attrs和$listeners把上层的属性和方法,原封不动传递给image-viewer组件,不用手动处理属性和方法,除非添加额外的功能
  • 修改关闭按钮的样式
<template>
 <div>
 <el-image-viewer
  v-bind="$attrs"
  v-on="$listeners"
 />
 </div>
</template>

<script>
// 手动导入图片预览组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
 name: 'ImagePreview',
 components: { ElImageViewer }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}
</style>

使用

<template>
 <div>
 <el-button type="primary" @click="handlePictureCardPreview"
  >大图预览</el-button
 >
 <image-preview
  v-if="dialogVisible"
  :on-close="
  () => {
   dialogVisible = false;
  }
  "
  :url-list="[dialogImageUrl]"
 />
 </div>
</template>

<script>
import ImagePreview from "@/components/ImagePreview";

export default {
 components: {
 ImagePreview,
 },
 data() {
 return {
  imageUrl:
  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&fm=26&gp=0.jpg",
  dialogImageUrl: "",
  dialogVisible: false,
 };
 },
 methods: {
 // 预览
 handlePictureCardPreview() {
  this.dialogImageUrl = this.imageUrl;
  this.dialogVisible = true;
 }
 },
};
</script>

优化:点击mask遮罩层关闭图片预览

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

分析

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

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

解决方法

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

完整代码如下:

<template>
 <div>
 <el-image-viewer
  ref="elImageViewer"
  v-bind="$attrs"
  v-on="$listeners"
 />
 </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
 name: 'ImagePreview',
 components: { ElImageViewer },
 props: {
 // 点击mask是否隐藏大图
 maskhide: {
  type: Boolean,
  default: true
 }
 },
 mounted() {
 if (this.maskhide) {
  this.addHideToMask()
 }
 },
 methods: {
 addHideToMask() {
  this.$viewer = this.$refs.elImageViewer
  if (this.$viewer) {
  // 获取遮罩层元素
  const mask = this.$viewer.$el.querySelector('.el-image-viewer__mask')
  if (mask) {
   // 遮罩层增加点击事件,关闭预览
   mask.addEventListener('click', this.hide)
   // hook卸载事件,移除之前添加在mask元素的事件
   this.$once('hook:beforeMount', () => {
   mask && mask.removeEventListener('click', this.hide)
   })
  }
  }
 },
 hide() {
  this.$viewer && this.$viewer.hide()
 }
 }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__btn.el-image-viewer__close {
 color: #fff;
}
</style>

查看在线示例

查看在线示例

以上就是elementui实现预览图片组件二次封装的详细内容,更多关于elementui 预览图片组件二次封装的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
layui实现数据分页功能
Jul 27 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
利用node.js开发cli的完整步骤
Dec 29 #Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 #Javascript
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
node.js通过Sequelize 连接MySQL的方法
Dec 28 #Javascript
解决elementui表格操作列自适应列宽
Dec 28 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
应届生求职信写作技巧
2013/10/24 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
小学科学教学计划
2015/01/21 职场文书
教师工作表现自我评价
2015/03/05 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
python程序的组织结构详解
2021/12/06 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js