个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章elementui实现预览图片组件二次封装由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

起因

在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 预览图片组件二次封装的资料请关注我其它相关文章！ 。

原文链接：https://juejin.cn/post/6911237216387727367 。

最后此篇关于elementui实现预览图片组件二次封装的文章就讲到这里了,如果你想了解更多关于elementui实现预览图片组件二次封装的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： win11和win10哪个流畅？win11和win10区别是什么？
文章推荐： Swoole实现异步投递task任务案例详解
文章推荐： 英雄联盟手游怎么删好友 英雄联盟手游删除好友怎么加回来
文章推荐： ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com