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 相关文章推荐
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
vuex与组件联合使用的方法
May 10 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
vue 全局环境切换问题
Oct 27 Javascript
React实现todolist功能
Dec 28 Javascript
利用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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP之数组学习
2011/05/29 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python运行时间的几种方法
2016/06/17 Python
详解Python多线程
2016/11/14 Python
Python 数据结构之队列的实现
2017/01/22 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
辩护意见书
2015/06/04 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
法制工作总结2015
2015/07/23 职场文书
七年级作文之雪景
2019/11/18 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android