前言
在Element UI中,使用el-image组件可以轻松实现图片的大图预览功能,为用户提供更佳的视觉体验。
一. HTML
首先是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;
}
}
}