前端图片放大(Element UI中的el-image,Element UI中的图片放大功能)
简介:Element UI 中,为了实现图片的大图预览功能,可以使用 el-image 组件来完成。这里来简单记录一下
一、首先看下html部分
点击图片放大
二、定义需要使用的属性
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; } } }
下班~
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...