Element-ul的 el-image-viewer组件实现点击【查看图片】能预览大图功能

最新推荐文章于 2024-07-01 17:56:37 发布
最新推荐文章于 2024-07-01 17:56:37 发布
阅读量6k 收藏 13
点赞数 6
分类专栏： element-ui Vue.js 项目实战经验 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39089928/article/details/120292103
版权
本文介绍了如何利用Element-ul的el-image-viewer组件实现点击‘查看图片’预览大图功能。内容包括组件导入、注册、使用方法、数据定义和方法编写。同时指出在table中使用该组件可能导致图片重叠的问题及解决方案，即把el-image-viewer置于table外部并通过点击事件处理。
摘要由CSDN通过智能技术生成

 element-ul有大图预览功能，链接如下

Element - The world's most popular Vue UI framework

但我们不想展示图片，想实现的是“查看图片”能预览大图（多张也可以预览）的功能。

如下图所示：

该如何实现呢？

1.导入组件

// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2.注册组件

  components: {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
吴小花的博客
关注
专栏目录
订阅专栏
vue使用elementUi中的图片查看器el-image-viewer
weixin_43111269的博客
05-05 2354
安装elementUi。
el-image-viewer图片预览组件使用
pscool的博客
07-12 3684
/ 预览图片显示的初始索引。// 显示图片预览的方法。// 关闭图片预览的方法。// 是否展示图片预览。
elementPlus 查看视频
最新发布
qq_46035691的博客
07-01 454
elementPlus 查看视频组件二次封装。 golang gin 上传文件 接口
el image-viewer 图片预览组件
352328759的博客
11-04 1754
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能 这个功能其实是调用内部组件 ImageViewer 实现的 一般情况直接用 el-image 里的预览足够了 但有一种情况, el-image 不能简单实现 那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图) 这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览 不能从指定图片开始预
el-image-viewer预览大图
Tang__CT的博客
04-29 2661
el-image-viewer预览大图 问题描述 在使用Elememt UI组件库时，通过el-image-viewer组件实现大图预览,会导致预览的大图重叠显示 原因 Elememt UI组件库中的el-table组件和el-image-viewer组件冲突 把el-image-viewer组件包含在了el-table组件内，导致el-table组件将其作为el-table-column进行渲染 <el-table :data="simulationResult" stripe style=
el-image-viewer 图片预览
weixin_47818125的博客
09-04 1026
点击某个按钮预览当前图片（直接引入element-ui路径的预览组件，会直接导致ie报不兼容ES6的错误，建议拷贝组件和里面的依赖代码 直接将element-ui的图片预览源码拷贝出来，然后引入到项目中，实现图片预览功能 <template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer
el图oracle,详解elementui之el-image-viewer(图片查看器)_融糖_前端开发者
weixin_39609407的博客
04-04 499
前言随着版本的更新Element UI新增了新的组件，例如：Image，没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。这是官方文档中有写的，但是我想不使用Image组件又想使用预览大图的功能是否可行呢？答案是当然可以。使用方法翻看了Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下props: {urlList...
Element-ui中 使用图片查看器（el-image-viewer) 预览图片
热门推荐
明天也要努力的博客
12-12 3万+
1. 简介 注意：本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。 2. 图片查看器（el-image-viewer) 的使用 翻看了 Image 的源码，发现实现大图预览的是一个小组件 image-viewer。 打开看看它的 props，如下： props
点击按钮(文字)调起elementUI大图预览
努力变好
04-11 1304
首先想到的是使用element-ui的el-image组件，但它是通过点击图片来实现的，不太符合我们的需求，如果有这方面的需求可以去官网看一下；下面来说如何解决点击按钮预览多张图片(我写的项目最多就两张图片) ，使用el-image-viewer(图片查看器)；就是这样子啦，完成啦 ，有问题留言（但我可能不太会哈哈哈哈哈），又是忙碌的一天，坐等下班~看一下效果叭亲亲们~
Element Ui中图片预览功能，点击当前图片显示当前图片。
weixin_71155604的博客
10-31 2048
更新时间：{{ time }}
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui大图预览el-image-viewer组件，实现图片查看
qq_32886245的博客
10-09 8364
在不使用Image组件的时候，可以用el-image-viewer组件实现大图预览。 <!-- 大图预览 --> <el-image-viewer v-if="showBig" :on-close="closeViewer" :url-list="showBigImgList" /> // 仅做示例 <script> import ElImageViewer from 'element-ui/packages/image/src/imag
element-ui大图预览,图片查看器el-image-viewer组件浏览图片
我总是词不达意的博客
02-15 2109
element-ui大图预览,图片查看器el-image-viewer组件浏览图片
用el-image-viewer实现全局预览图片
weixin_45313351的博客
01-16 1774
其实就是把根组件的图片预览显现，和调用预览方法 都是交给状态管理控制的，这样就用el-image-viewer 实现全局预览图片的功能。
巧用element-ui自带隐藏的图片查看器el-image-viewer浏览图片(附兼容IE骚操作)
weixin_46711427的博客
05-05 9849
随着版本的更新Element UI新增了新的组件，例如：Image，这是官方文档中有写的 但我的需求并不是展示图片后再点击图片打开大图浏览，需求可能是一个文字，点击后查看大图，但又不想引入其他npm插件，例如这样： 食用方法 通过翻看Image组件源码， 地址：https://github.com/ElemeFE/element/blob/dev/packages/image/src/main.vue 发现大图预览是一个小组件el-image-viewer：
使用element-ui预览图片（el-image-viewer）
Pure_White520的博客
02-22 1746
想要不使用 `el-image` 组件，即为不想展示小图，想要点击按钮的时候预览图片。
vue结合element实现表格图片el-image并且预览放大图片
04-25
好的，让我解答您的问题。首先，在使用vue结合element实现表格图片el-image并且预览放大图片需要做以下几个步骤： 1. 首先，在template区域，需引入el-image标签，并且将其放在表格中。如下所示： <el-table-column > <template slot-scope="scope"> <el-image style="width: 100px; height: 100px" :src="scope.row.image" preview-src-list="[scope.row.image]"></el-image> </template> </el-table-column> 2. 其次，在script区域，引入el-dialog标签，并在el-image标签内添加click事件，使弹出框显示图片放大效果。如下所示： <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <img :src="dialogImageUrl" style="width: 100%"> </el-dialog> data() { return { dialogImageUrl: '', dialogVisible: false } }, methods: { handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleClose(done) { this.dialogVisible = false; done(); } } 3. 最后，在style区域，添加样式属性使弹出框中的图片居中，并且达到放大效果。如下所示： .el-dialog__wrapper img { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; object-fit: contain; } 希望这个回答能够对您有所帮助！
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴小花的博客

1分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值