ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端图片放大（Element UI中的el-image，Element UI中的图片放大功能） [打印本页]

---

作者: 道家人    时间: 2024-7-22 14:56
标题: 前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
简介：Element UI 中，为了实现图片的大图预览功能，可以使用 el-image 组件来完成。这里来简朴记录一下


一、首先看下html部分

1. <div class="eventImg_box" @click="choseEventImg(item)">
2.      <el-image
3.      :src="item.eventImagePath"
4.      :preview-src-list="imgList"
5.       class="event_img"
6.       >
7.       </el-image>
8.       <div class="big_img">点击图片放大</div>
9. </div>

复制代码

二、定义必要使用的属性

1. data() {
2.     return {
3.       imgList: [],
4.     };
5. },

复制代码

三、变乱函数

1. choseEventImg(item) {
2.       this.imgList = [];
3.       this.imgList[0] = item.eventImagePath;
4. },

复制代码

四、使用注意事项

• 变乱触发时，记得首先要把数组清空，把imgList等于空数组，然后赋值。
  
• 变乱触发时，把img的路径，直接赋值给第一项，注意是imgList[0]，也就是preview-src-list绑定的数组元素imgList
  

五、样式在这

1. .eventImg_box {
2.   position: relative;
3.   cursor: pointer;
4.   .event_img {
5.     width: 100%;
6.     height: 180px;
7.   }
8.   .big_img {
9.     color: white;
10.     display: none;
11.     position: absolute;
12.     left: 50%;
13.     transform: translateX(-50%);
14.     bottom: 10%;
15.   }
16.   &:hover {
17.     .big_img {
18.       display: block;
19.     }
20.   }
21. }

复制代码

放工~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4