vue-preview 动态获取宽高

最新推荐文章于 2024-08-20 08:56:09 发布

彻夜不归

最新推荐文章于 2024-08-20 08:56:09 发布

阅读量3.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40204835/article/details/79776689

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用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>