需要

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

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

总结

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