简介: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