简介: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;}}
}
下班~