实现
element-plus下有这么一个组件
<el-image-viewer/>，但是这个组件是没写在文档上面的，像普通组件一样使用即可
可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览
封装组件
<template>
<div class="img-viewer-box">
<el-image-viewer
v-if="state.visible"
:url-list="props.imgs"
@close="close"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useVModel } from '@vueuse/core'
const props = defineProps<{
modelValue: boolean
imgs: string[]
}>()
const emits = defineEmits<{
(e: 'update:modelValue', data: boolean)
}>()
const state = reactive({
imgList: [],
// 相当于是set 与 get
visible: useVModel(props, 'modelValue', emits),
})
// 点击关闭的时候，连同小图一起关闭
function close() {
state.visible = false
}
</script>
<style scoped></style>组件使用
在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可
重点是上面的组件封装，
<!-- 增加用于显示预览图片 -->
<ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />
用代码触发“点击”事件
共两步：
把小图的宽高设为0
在需要时用代码模拟一下小图的点击事件
先来看文档中给出的示例代码：
在依赖环境正确的情况下，复制到合适位置就可以正常使用。
接下来对它进行修改。
1.获取引用
要想模拟点击，前提就是获取dom元素的引用。
VUE中有三种获取的方式，本文以最简单的document方式举例。
给元素加个id：
此时，如果在ts中执行document.getElementById('show-image').click()就可以显示大图了。
这一步测试成功之后就可以把document.getElementById('show-image').click()绑定到其他事件上，比如某个按钮的点击，这样就实现了“点击按钮显示大图”
2.设置宽高为0
因为<el-image-viewer/>和<el-image/>完全就是两个组件，所以小图不会影响大图，直接置0即可：
此时页面上就不会再显示它了，而触发事件仍然能正常显示大图。
3.改变大图
目前的大图url是写死的，如果想让图片变化就得把url数组传进来。
这里补充一个基本知识：
在vue中，如果只用let定义变量，而且页面使用了这个变量，当组件渲染完成后，再去改变let变量的值，组件中不会跟着变化。如果想让组件能变化，必须使用ref定义引用变量。
也就是：
如果后续想让url变化，需要用srcList.value = 来改变变量的值。
类似这样（用mitt实现，也可以用其他方式实现，只要能调用到这两行代码即可）：
这样就实现了通过其他的事件触发<el-image-viewer/>大图的效果。