前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
简介：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 = item.eventImagePath;
},
四、使用注意事项
[*] 变乱触发时，记得首先要把数组清空，把imgList等于空数组，然后赋值。
[*]变乱触发时，把img的路径，直接赋值给第一项，注意是imgList，也就是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;
}
}
}
放工~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]