el-image组件预览图片同时操作页面

最新推荐文章于 2024-07-24 15:48:10 发布
最新推荐文章于 2024-07-24 15:48:10 发布
阅读量322 收藏
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26695613/article/details/138114132
版权
文章讲述了在使用el-image组件时，如何保持预览效果的同时允许页面滑动。通过改变遮罩层的宽度属性为`width:fit-content`，并针对Vue2中的CSS样式调整添加`/deep/`前缀，解决了遮罩层打开后仍能操作页面的问题。
摘要由CSDN通过智能技术生成

背景：el-image组件打开预览效果不能滑动页面。

Q:那么如何才能在打开遮罩层后还能操作页面呢？

 A:改变遮罩层的大小。CSS3有一个属性width：fit-content；可以解决这个问题。

打开F12看看饿了么的原生样式如下

加上width：fit-content；效果如下

红色区域就是可操作dom。并且可以随着拖动图片位置来设定遮罩层的大小。

最后注意一点。修改饿了么原生样式在vue2种需要加/deep/ 前缀修饰，不然不会生效。

 

书中自有妍如玉
关注
专栏目录
el-image-viewer图片预览功能
jieweiwujie的博客
11-17 1172
【代码】el-image-viewer图片预览功能。
el image-viewer 图片预览组件
352328759的博客
11-04 1744
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能 这个功能其实是调用内部组件 ImageViewer 实现的 一般情况直接用 el-image 里的预览足够了 但有一种情况, el-image 不能简单实现 那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图) 这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览 不能从指定图片开始预
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-image预览图片点击遮盖处关闭预览
最新发布
JiAyInNnNnN123的博客
07-24 480
2.使用事件监听，监听当前遮盖mask，点击时，执行关闭按钮的事件。
Element-ui中的el-image的图片预览功能（:preview-src-list）
CSDN_XHC的博客
05-20 2万+
今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是当点击图片时，就预览当前点击的图片。 所以我将其修改了一下，功能就是当点击一行表格中的一个图片时，这个图片就被预览了，代码很简单，就是直接复制element-ui中的图片预览组件就行 <el-table-column label="员工照片" align="center"> <template slot-scope="scope"&gt..
【Element】el-image 预览功能
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-23 336
【代码】【Element】el-image 预览功能。
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
elementui el-image组件 点击预览图片
weixin_43550562的博客
06-19 2141
效果：点击单个图片，查看大图。
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
el-image-viewer图片预览组件使用
pscool的博客
07-12 3664
/ 预览图片显示的初始索引。// 显示图片预览的方法。// 关闭图片预览的方法。// 是否展示图片预览。
element el-image 点击图片大屏预览
entryTOearth的博客
08-22 171
element el-image 点击图片大屏预览
el-image 文字触发大图预览
m0_38066007的博客
12-14 1040
【代码】el-image 文字触发大图预览。
Vue项目中，el-image实现按钮触发大图预览模式
Hello World
08-03 6465
Vue项目中，el-image实现按钮触发大图预览模式
el-image列表图片预览可通过 previewSrcList 开启预览大图的功能
m0_60459392的博客
05-06 1347
el-image列表图片预览可通过 previewSrcList 开启预览大图的功能。
不点击图片，直接实现el-image的大图预览功能
茶荼
03-09 5056
不点击图片，直接实现el-image的大图预览功能
使用element-ui的el-image图片预览功能 支持图片下载
qq_42828496的博客
08-01 1万+
项目场景： 工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是 简单放大旋转功能，解决方法 要么 修改组件，要么 通过 js动态渲染进去，接下来看操作 解决方法： 通过点击放大时，添加点击事件，然后通过append 添加 按钮并且绑定事件，还是看下图吧，兄弟们，粘起来 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt
关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。
翻斗花园初级搬运工
01-05 1675
关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。（以下为个人思路，大佬请略过）首先，当用户点击图片时，有三种情况。分别是当用户点击的为第一张图片时，当用户点击的第X张图片时，当用户点击的是和上一次点击时的图片。最后，预览时点击翻页按钮，需要动态获取图片的名称。其次，要对点击大图预览时，添加照片的名称。
el-image 图片预览
07-30
Element UI中的el-image组件本身并不提供图片预览的功能。根据引用[1]中的描述，你对Element UI的图片预览功能进行了修改，以实现在表格上显示多张图片，并在点击图片时以轮播图的形式进行预览。你可以通过自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值