前端图片放大（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[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;    }  }}

下班~

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/zhengce/2024-04-22/161287.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！