做网站的一般都包维护吗,如何做网站域名,优化服务公司,网站开发的心得简介#xff1a;Element UI 中#xff0c;为了实现图片的大图预览功能#xff0c;可以使用 el-image 组件来完成。这里来简单记录一下 一、首先看下html部分
div classeventImg_box clickchoseEventImg(item)el-image:srcitem.e…简介Element UI 中为了实现图片的大图预览功能可以使用 el-image 组件来完成。这里来简单记录一下 一、首先看下html部分
div classeventImg_box clickchoseEventImg(item)el-image:srcitem.eventImagePath:preview-src-listimgListclassevent_img/el-imagediv classbig_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;}}
} 下班~
