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判断函数
Aug 14 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
Vue实现多页签组件
Jan 14 Vue.js
JavaScript 原型与原型链详情
Nov 02 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解析json数据实例
2014/08/19 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python Django模板的使用方法
2016/01/14 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python贪吃蛇游戏代码
2020/04/18 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
医疗纠纷协议书
2014/04/16 职场文书
给校长的一封检讨书
2014/09/20 职场文书
工作收入证明模板
2014/10/10 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技