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

问题 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。这样可以提供更灵活的缩放操作体验。

html 复制代码
<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>
相关推荐
小满zs20 小时前
Next.js第一章(入门)
前端
摇滚侠20 小时前
CSS(层叠样式表)和SCSS(Sassy CSS)的核心区别
前端·css·scss
不爱吃糖的程序媛20 小时前
Electron 桌面应用开发入门指南:从零开始打造 Hello World
前端·javascript·electron
Dontla20 小时前
前端状态管理,为什么要状态管理?(React状态管理、zustand)
前端·react.js·前端框架
编程猪猪侠20 小时前
前端根据文件后缀名智能识别文件类型的实用函数
前端
yinuo20 小时前
基于 Git Submodule 的代码同步融合方案
前端
伶俜monster20 小时前
大模型 “万能接口” MCP 横空出世!打破数据孤岛,重塑 AI 交互新规则
前端·mcp
你听得到1120 小时前
肝了半个月,我用 Flutter 写了个功能强大的图片编辑器,告别image_cropper
android·前端·flutter
Macbethad21 小时前
Typora 精通指南:掌握高效 Markdown 写作的艺术
前端·macos·前端框架
F_Director21 小时前
Webpack DLL动态链接库的应用和思考
前端·webpack·性能优化