乐趣区

关于vue3:VUE3ElementPlus简单实现大图预览解决elimage没有事件接口的问题

jiezi

需要

本文想要实现的款式是，通过任意事件，比方点击图片或点击按钮，触发一个全屏的图片预览。

看一看 element 官网中的例子：

点击这个图片

就会呈现全屏的大图预览

这个大图能够自在缩放，多张图片能够切换，而且大图的 url 和小图的 url 并没有关系。

但 element 这个 <el-image> 组件存在一个问题：它的大图必须通过点击小图触发，而文档上并没有点击事件的接口。

这就意味着，无奈实现“点击其余自定义的按钮来显示大图”，只能“点击 <el-image/> 小图”来调用它外部的事件。

其余的解决办法——<el-image-viewer/>

其余文章中给出了一个方法:

element 中的大图实质是另一个组件 <el-image-viewer/>，“点击小图显示大图”的过程就是<el-image> 点击之后显示了 <el-image-viewer/>。
尽管 <el-image-viewer/> 没有在文档中被给出，但能够间接应用，只须要额定的管制它的显隐即可。

具体用法能够看链接。

本文的办法——用代码触发“点击”事件

本文的办法比较简单粗犷，共两步：

  1. 把小图的宽高设为 0
  2. 在须要时用代码模仿一下小图的点击事件

这样标准吗？显然是不标准，但下班的代码又不是开源我的项目，能跑即可，要什么自行车。

先来看文档中给出的示例代码：

<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />
  </div>
</template>

<script lang="ts" setup>
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped>
.demo-image__error .image-slot {font-size: 30px;}
.demo-image__error .image-slot .el-icon {font-size: 30px;}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>

在依赖环境正确的状况下，复制到适合地位就能够失常应用。

接下来对它进行批改。

1. 获取援用

要想模仿点击，前提就是获取 dom 元素的援用。
VUE 中有三种获取的形式，本文以最简略的 document 形式举例。
给元素加个 id：

    <el-image
      id="show-image"
      style="width: 100px; height: 100px"
      :src="url"
      其余参数略
    />

此时，如果在 ts 中执行 document.getElementById('show-image').click() 就能够显示大图了。

这一步测试胜利之后就能够把 document.getElementById('show-image').click() 绑定到其余事件上，比方某个按钮的点击，这样就实现了“点击按钮显示大图”

2. 设置宽高为 0

因为 <el-image-viewer/> 和<el-image/>齐全就是两个组件，所以小图不会影响大图，间接置 0 即可：

    <el-image
      id="show-image"
      style="width: 100px; height: 100px"
      :src="url"
      其余参数略
    />

此时页面上就不会再显示它了，而触发事件依然能失常显示大图。

3. 扭转大图

目前的大图 url 是写死的，如果想让图片变动就得把 url 数组传进来。
这里补充一个基本知识：

在 vue 中，如果只用 let 定义变量，而且页面应用了这个变量，当组件渲染实现后，再去扭转 let 变量的值，组件中不会跟着变动。如果想让组件能变动，必须应用 ref 定义援用变量。

也就是：

let srcList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])

如果后续想让 url 变动，须要用 srcList.value = 来扭转变量的值。

相似这样（用 mitt 实现，也能够用其余形式实现，只有能调用到这两行代码即可）：

    // 当其余组件弹射时，先批改 url 的值，再模仿点击一下图片
    bus.on("showImg", ({ data: data}) => {
      srcList.value = data;
      document.getElementById('show-image').click()})

这样就实现了通过其余的事件触发 <el-image-viewer/> 大图的成果。

总结

非常简单粗犷，下班的代码能跑即可，节约工夫。

退出移动版