共计 1414 个字符,预计需要花费 4 分钟才能阅读完成。
element ui 的 Image 图片
组件的 大图预览
须要点击一个图片能力进行触发大图预览,那么咱们不想通过点击小图进行图片预览要怎么做呢?
预览
先看下 DEMO
场景
我的项目中须要点击按钮去向后盾申请图片地址,而后再进行大图预览
实现思路
咱们能够把这个 默认预览的小图
用一个对立的图片进行代替,提前放在我的项目的动态文件中,
而后把这个图片定位到按钮的上方,再将图片的透明度设置为 0
, 这样点击按钮其实是点击了按钮上方的 小图
第一步
咱们先实现个表格款式
<table border=1>
<tr>
<th> 序号 </th>
<th> 订单号 </th>
<th> 操作 </th>
</tr>
<tr>
<td>1</td>
<td>0356894598</td>
<td>
<div class='img'>
图片预览
<div class="demo-image__preview">
<el-image lazy :src="url" @click='clickimg' :preview-src-list="srcList">
</el-image>
</div>
</di>
</td>
</tr>
</table>
再加点款式
.img {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
position: relative;
}
.demo-image__preview {
width: 100%;
height: 100%;
top: 0;
position: absolute;
cursor:pointer;
}
.demo-image__preview .el-image {
width: 100%;
height: 100%;
}
你会发现图片的小图脱离文档里笼罩在了文字的上方,而后咱们加个透明度给他
.demo-image__preview {
.. 省略代码..
.. 省略代码..
opacity: 0;
}
这样,点击文字其实就是点击小图达到以假乱真的成果,而后咱们退出js
data() {
return {
url:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
srcList: []};
},
methods: {async clickimg() {
this.srcList = [(await this.getimgById(0)).src,
(await this.getimgById(1)).src,
(await this.getimgById(2)).src
];
},
getimgById(id) {
let imglist = [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
];
return new Promise((res) => {res({ src: imglist[id] });
});
}
}
这里模仿了一个依据 id
申请图片的接口,能够自行替换。
你学会了吗?
正文完
发表至: javascript
2021-04-09