vue-preview 动态获取宽高
使用vue-preview遇到问题 就是必须设置宽高 官方给出的答案是 预览必须以list对象的形式 以下是我实现的效果图预览效果 ： 是获取图片原有的宽高进行设置的 截图方便大家仔细看以下是代码 不指出请指出（谢谢）<template><div id="app"><img class=&q
·
使用vue-preview遇到问题 就是必须设置宽高
官方给出的答案是 预览必须以list对象的形式
以下是我实现的效果图
预览效果 ： 是获取图片原有的宽高进行设置的 截图方便大家仔细看
以下是代码 不指出请指出（谢谢）
<
template>
<
div
id=
"app">
<
img
class=
"preview-img"
v-for="(item, index)
in imgList"
:src="item.src"
:key="index"
height=
"100"
@click="$preview.
open(index, imgList)">
</
div>
</
template>
<
script>
export
default {
data () {
return {
list: [{
src:
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1944805937,3724010146&fm=27&gp=0.jpg'
}, {
src:
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=807605679,2027849210&fm=27&gp=0.jpg'
}],
imgArray: [],
imgList: []
}
},
created () {
for (
let i
=
0;i
<
this.list.length; i
++) {
// 循环遍历数组
let img
=
new
Image();
// 创建一个Image对象
let obj
= {};
// 定义一个保存的宽高的值
img.src
=
this.list[i].src;
// 定义Image对象 相当于给浏览器缓存了一张图片
img.
onload
=
function () {
// 图片的宽高要做onload后才能获取到
obj.src
= img.src;
obj.w
= img.width;
obj.h
= img.height;
}
this.imgArray.
push(obj)
// 存放数组
}
setTimeout(()
=> {
// 正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身，这时就可以用到setTimeout延时0ms来实现了。
this.imgList
=
this.imgArray
},
0)
},
mounted () {
},
methods: {
},
}
</
script>
<
style>
html {
height:
100
%;
}
body {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100
%;
}
</
style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献12条内容
所有评论(0)