我要评论简介：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;
}
}
}
下班~
发表评论