修改el-image-viewer 滚轮缩放速度scale

原创 于 2024-11-19 15:34:03 发布 · 497 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

从node_modules/element-ui/image/中找到image-viewer.vue复制粘贴到自己的components里
修改以下部分，再引入到自己的vue页面即可
在这里插入图片描述
我改了下名，把image-viewer改成驼峰了，个人项目代码规范需求，仅供参考
在这里插入图片描述

Ann_R
关注
el-image-viewer图片预览功能
jieweiwujie的博客
11-17 1936
【代码】el-image-viewer图片预览功能。
element-ui点击预览按钮直接弹出有放大缩小预览效果的图片（el-image-viewer）
victorylip的博客
06-29 4316
element-ui预览组件使用
elementui ui对el-image-viewer的简单封装及使用
02-27 3614
el-image-viewer封装预览图片
ElementUI的el-image大图预览里没有类似elementuiPlus调整缩放倍率的zoom-rate属性，如何实现调整缩放倍率？完美解决方案
weixin_43707053的博客
04-28 1187
ElementUI的el-image大图预览preview-src-list里，如何实现调整缩放倍率？完美解决方案！
Element-ui中 使用图片查看器（el-image-viewer) 预览图片
热门推荐
明天也要努力的博客
12-12 4万+
1. 简介 注意：本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。 2. 图片查看器（el-image-viewer) 的使用 翻看了 Image 的源码，发现实现大图预览的是一个小组件 image-viewer。 打开看看它的 props，如下： props
巧用element-ui自带隐藏的图片查看器el-image-viewer浏览图片(附兼容IE骚操作)
weixin_46711427的博客
05-05 1万+
随着版本的更新Element UI新增了新的组件，例如：Image，这是官方文档中有写的 但我的需求并不是展示图片后再点击图片打开大图浏览，需求可能是一个文字，点击后查看大图，但又不想引入其他npm插件，例如这样： 食用方法 通过翻看Image组件源码， 地址：https://github.com/ElemeFE/element/blob/dev/packages/image/src/main.vue 发现大图预览是一个小组件el-image-viewer：
vue使用elementUi中的图片查看器el-image-viewer
weixin_43111269的博客
05-05 2632
安装elementUi。
【零散知识记录】
weixin_44167504的博客
08-05 1717
【零散知识记录】 一、sort排序 二、vue同一页面同一组件多用，页面互相影响问题 三、vue $emit传递多个参数 四、echarts5与水球liquidFill3五、postgresQL 六、路由监听 七、多个form表单使用同一表单验证( iview )八、Viewer图片预览图片在弹出层之后九、postgreSQL实现主键ID自增 十六、JS 定位相当于a标签href定位，优于a标签 十七、vue之监听页面滚动 十八、正则 十九、多个drawer覆盖问题 二十、WebStorm+egg 断点调试
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
详解elementui之el-image-viewer(图片查看器)
10-16
这个组件是独立于`el-image`组件的，这意味着即使你不直接使用`el-image`，也能单独利用`el-image-viewer`实现大图预览。 在`el-image-viewer`的使用中，有两个关键的属性： 1. `urlList`：这是一个数组，用于存储...
使用element-ui预览图片（el-image-viewer）
Pure_White520的博客
02-22 2126
想要不使用 `el-image` 组件，即为不想展示小图，想要点击按钮的时候预览图片。
不点击图片，直接实现el-image的大图预览功能
茶荼
03-09 6051
不点击图片，直接实现el-image的大图预览功能
el-image-viewer 图片预览
weixin_47818125的博客
09-04 1647
点击某个按钮预览当前图片（直接引入element-ui路径的预览组件，会直接导致ie报不兼容ES6的错误，建议拷贝组件和里面的依赖代码 直接将element-ui的图片预览源码拷贝出来，然后引入到项目中，实现图片预览功能 <template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer
Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动
shadow_yi_0416的博客
12-01 2898
需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片 html代码：按钮 <el-button @click="showImg"> 点击按钮预览图片</el-button> html代码：图片 图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0； 因此，我想其实可以设置一个宽度近乎没有值。 <el-image ref="preview" style="wid
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
qq_48850466的博客
12-11 2679
vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；
用el-image-viewer实现全局预览图片
weixin_45313351的博客
01-16 2393
其实就是把根组件的图片预览显现，和调用预览方法 都是交给状态管理控制的，这样就用el-image-viewer 实现全局预览图片的功能。
pyqtgraph imageview 如何限制缩放
Kp0fS的草稿纸
09-25 872
pyqtgraph
el-image-viewer 大图预览（源码，属性讲解）
最新发布
lotpyve的博客
09-25 3463
以上是组件共享出来的属性，如果我们想有一些个性化的需求，比如轮播到最后一张不能滚动等，可以使用 infinite，infinite 虽然没有共享出来，我们可以在 父组件 通过 this.$refs 的方法获取到这个组件，然后就可以改变他的 infinite 属性了，要注意的是，需要在当前组件 v-if 为真的时候通过this.$refs获取。或者我们可以自己把源码封装成一个自己的组件，方便使用。图片的urc数组，里面的每一项元素是一个图片地址。预览的初始图片在urlList的索引。
el-image-viewer图片预览组件使用
pscool的博客
07-12 4656
/ 预览图片显示的初始索引。// 显示图片预览的方法。// 关闭图片预览的方法。// 是否展示图片预览。
el-image-viewer修改大小
01-16
el-image-viewer是element-ui中的一个组件，用于显示图片的预览。要修改el-image-viewer的大小，可以通过以下方法实现： 1. 使用CSS样式修改大小： 可以通过给el-image-viewer添加自定义的CSS样式来修改其大小。例如，可以使用`width`和`height`属性来设置宽度和高度，或者使用`transform`属性来缩放元素的大小。 ```html <el-image-viewer class="custom-image-viewer"></el-image-viewer> <style> .custom-image-viewer { width: 500px; height: 300px; } </style> ``` 2. 修改默认尺寸： el-image-viewer的默认尺寸可以通过修改element-ui的样式来实现。可以在项目中的样式文件中添加自定义的CSS样式，覆盖element-ui的默认样式。 ```css .el-image-viewer__wrapper { width: 500px; height: 300px; } ``` 请注意，以上方法仅适用于修改el-image-viewer的大小。如果需要修改el-image-viewer中图片的大小，可以使用CSS样式或者修改图片的尺寸属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值