简介：Element UI 中，为了实现图片的大图预览功能，可以使用 el-image 组件来完成。这里来简单记录一下

一、首先看下html部分

<div class="eventImg_box" @click="choseEventImg(item)"> <el-image :src="item.eventImagePath" :preview-src-list="imgList" class="event_img" > </el-image> <div class="big_img">点击图片放大</div></div>

二、定义需要使用的属性

data() { return { imgList: [], };},

三、事件函数

choseEventImg(item) { this.imgList = []; this.imgList[0] = item.eventImagePath;},

四、使用注意事项

事件触发时，记得首先要把数组清空，把imgList等于空数组，然后赋值。

事件触发时，把img的路径，直接赋值给第一项，注意是imgList[0]，也就是preview-src-list绑定的数组元素imgList

五、样式在这

.eventImg_box { position: relative; cursor: pointer; .event_img { width: 100%; height: 180px; } .big_img { color: white; display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 10%; } &:hover { .big_img { display: block; } }}

下班~