elementuiPlus 中的 el-image 实现全屏展示,放大缩小配置偶尔失效?

ops/2024/10/21 11:51:20/
问题 elementuiPlus 中的 el-image 实现全屏展示,滚轮失效。

全屏事件的放大缩小,主要是通过配置 zoom-rate , max-scale,min-scale来实现。【我遇到的事件失效的原因是因为我把 zoom-rate设置成了1】

默认值:

:zoom-rate="1.2" :max-scale="7" :min-scale="0.2"

zoom-rate:用于设置图片的缩放速率。它指定了每次缩放操作的缩放比例。不要等于1。如果是大于1,滚轮向上是放大;如果是小于1,滚轮向下是放大。
max-scale:表示图片可以放大的最大比例。超过这个比例后,图片将无法再进行放大操作。
min-scale:表示图片可以缩小的最小比例。超过这个比例后,图片将无法再进行缩小操作。

这些值通常是根据具体需求进行调整的。例如,如果希望用户可以在全屏模式下自由缩放图片,可以将 max-scale 设置为较大的值,例如 5 或 7,而将 min-scale 设置为较小的值,例如 0.1 或 0.5。这样可以提供更灵活的缩放操作体验。

<el-image :src="state.detailImages?.livenessData?.imageUrl":zoom-rate="1.2":max-scale="7":min-scale="0.2":preview-src-list="state.allImgUrl"fit="cover"><template #error><div class="image-slot"><el-icon><icon-picture/></el-icon></div></template>
</el-image>

http://www.ppmy.cn/ops/4848.html

相关文章

【深度学习实战(10)】图像推理之预处理

一、预处理流程 在把一张图像送入模型进行推理时&#xff0c;需要先进行预处理&#xff0c;预处理流程包括&#xff1a; &#xff08;1&#xff09;读取图像 &#xff08;2&#xff09;尺寸调整&#xff0c;letter_box&#xff08;不失真&#xff09; &#xff08;3&#xff0…

gazebo中vins-fusion在仿真小车上的部署

软件要求&#xff1a;Ubuntu 20.04 ros的noetic版本&#xff0c;我是在虚拟机vitrualbox上运行的 这几天在学ROS&#xff0c;跟着赵虚左老师过了一遍之后&#xff0c;感觉还是有很多不懂的地方&#xff0c;xtdrone上仿真跟着文档走了一遍&#xff0c;好像没学到什么东西&#…

MySQL 8 那些新来的参数,给那些快被淘汰的MYSQL DBA

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;…

Linux下的GDB调试器:深入使用指南

在Linux软件开发过程中&#xff0c;调试是不可避免的一环&#xff0c;而GDB&#xff08;GNU Debugger&#xff09;是最强大的调试工具之一&#xff0c;用于发现运行程序中的疏漏并修复它们。这篇博客将通过详尽的介绍和实用的示例&#xff0c;帮助您熟练掌握GDB的使用方法 list…

Spark-Scala语言实战(16)

在之前的文章中&#xff0c;我们学习了三道任务&#xff0c;运用之前学到的方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&#x…

美业连锁门店收银系统源码-如何查看收款门店对应的加盟商?

美业管理系统源码 博弈美业SaaS系统 连锁多门店美业收银系统源码 多门店管理 / 会员管理 / 预约管理 / 排班管理 / 商品管理 / 促销活动 PC管理后台、手机APP、iPad APP、微信小程序 第一步&#xff1a; 登录pc管理后端 第二步&#xff1a; 进入企业组织管理-门店管理&a…

docker+awk=无敌?!

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 dockerawk无敌&#xff1f;&#xff01; 前言需求分析容器间通过容器名称访问脚本实现一键部署命令解释 前言 当今软件开发的世界充满了数据&#xff0c;而 Docker 则是许多开发者首选的容器化解决方…

nodejs模块机制

模块机制 CommonJs规范 模块引用 上下文提供require()方法来引人外部模块var math require(math) 模块定义 exports 对象用于到处当前模块中的方法和变量module代表模块自身 exports.add function() {...}在另一个模块中使用require()方法进行导入。就可以使用 区别和联系 …