乐趣区

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

需要

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

看一看 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/> 大图的成果。

总结

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

退出移动版