vue3 element-plus 实现图片预览
发布时间：2025-02-14, 10:44:38 分类：Vue | 编辑 off 网址 | 辅助
正文 1157字数 2,915阅读
实现
element-plus下有这么一个组件
<el-image-viewer/>Run code
Cut to clipboard
可以通过点击按钮实现图片预览，而非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>Run code
Cut to clipboard
组件使用
在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可
重点是上面的组件封装，
<!-- 增加用于显示预览图片 -->
<ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
共两步：
把小图的宽高设为0
在需要时用代码模拟一下小图的点击事件
先来看文档中给出的示例代码：
<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/>大图的效果。