vue-preview 动态获取宽高
使用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>