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

server/2024/10/21 7:57:56/
问题 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/server/4994.html

相关文章

【在线OJ系统】自定义注解实现分布式ID无感自增

实现思路 首先自定义参数注解&#xff0c;然后根据AOP思想&#xff0c;找到该注解作用的切点&#xff0c;也就是mapper层对于mapper层的接口在执行前都会执行该aop操作&#xff1a;获取到对于的方法对象&#xff0c;根据方法对象获取参数列表&#xff0c;根据参数列表判断某个…

java表单类爬虫

见代码附件 编写方式1 public static void Posts() throws IOException{// 创建 HTTP POST 请求HttpPost httpPost new HttpPost("http://www.cninfo.com.cn/new/disclosure");// 设置请求头httpPost.setHeader("Content-Type", "application/x-www…

HarmonyOS开发实例:【分布式新闻客户端】

介绍 本篇Codelab基于栅格布局、设备管理和多端协同&#xff0c;实现一次开发&#xff0c;多端部署的分布式新闻客户端页面。主要包含以下功能&#xff1a; 展示新闻列表以及左右滑动切换新闻Tab。点击新闻展示新闻详情页。点击新闻详情页底部的分享按钮&#xff0c;发现周边…

Games104 现代游戏引擎3

Sprite Animation 序列帧动画 自由度&#xff08;degrees of freedom&#xff0c;DoF&#xff09;对于刚体而言描述它的运动需要3个位移3个旋转&#xff0c;一共6个自由度 顶点动画&#xff08;per-vertex animation&#xff09;利用网格的顶点来控制运动。此时网格上的每个顶…

客户端动态降级系统

本文字数&#xff1a;4576字 预计阅读时间&#xff1a;20分钟 01 背景 无论是iOS还是Android系统的设备&#xff0c;在线上运行时受硬件、网络环境、代码质量等多方面因素影响&#xff0c;可能会导致性能问题&#xff0c;这一类问题有些在开发阶段是发现不了的。如何在线上始终…

达梦数据库导入导出工具dmfldr

达梦数据库导入导出工具dmfldr 基础信息 OS版本&#xff1a; Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a; DM Database Server 64 V8 DB Version: 0x7000c 03134284132-20240115-215128-200811 dmfldr工具介绍 dmfldr&#xff08;DM Fast Loade…

设计模式代码实战-观察者模式

1、问题描述 小明所在的学校有一个时钟&#xff08;主题&#xff09;&#xff0c;每到整点时&#xff0c;它就会通知所有的学生&#xff08;观察者&#xff09;当前的时间&#xff0c;请你使用观察者模式实现这个时钟通知系统。 注意点&#xff1a;时间从 0 开始&#xff0c;并…

Jackson 2.x 系列【25】Spring Boot 集成之起步依赖、自动配置

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 本系列Spring Boot 版本 3.2.4 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 前言2. 起步依赖3. 自动配置3.1 JacksonPrope…