vue 实现根据窗口大小自适应图片预览

  <!-- 查看大图 -->
  <div class="viewPic-container" v-show="picSrc">
    <!-- 遮罩层 -->
    <div class="modal" @click="endViewPic"></div>
    <img class="viewPic-img" :src="picSrc" :style="{width, height} = picSize">
  </div>

.viewPic-container {
    
    
  display:flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:100;
}
.modal {
    
    
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  opacity:.5;
}
.viewPic-img{
    
    
  display: block;
  position:relative;
  object-fit: scale-down;
}

0.data 字段设置

• screenSize 记录视窗大小的对象
• picSrc 预览的图片 src
• picWidth 图片的原始宽度
• picHeight 图片的原始高度

  data() {
    
    
    return {
    
    
	  // 监听窗口大小，使图片自适应
      screenSize:null,
      // 查看大图的图片 src 及其原始大小
      picSrc:'',
      picWidth:0,
      picHeight:0,
    }
  },

1.监听窗口大小的改变，更新 screenSize

• 在 mounted 中，设置监听窗口大小的改变
• 当窗口大小发生改变的时候，使用 window.innerWidth 和 window.innerHeight 将 data 中对应的字段更新
• 记得使用防抖装饰器包装。

mounted() {
    
    
  // 初始化窗口大小 + 设置监听
  this.screenSize = {
    
    
    width:document.body.clientWidth,
    height:document.body.clientHeight
  }
  window.onresize = this.listenScreenSize
},
beforeUnmounted(){
    
    
  window.onresize = null
},
methods: {
    
    
	// 监听窗口大小变化
	listenScreenSize:this.debounceWrapper(function(e){
    
    
	  const {
    
    innerWidth:width, innerHeight:height} = e.target
	  this.screenSize = {
    
    width, height}
	  console.log('ScreenSize', this.screenSize, width, height)
	}),
	debounceWrapper(func){
    
    
	  let timer;
	  return function(){
    
    
	  	clearTimeout(timer);
	  	timer = setTimeout(()=>func.apply(this, arguments),500)
	  }
	}
}

2.获取图片的原始宽高，更新 picWidth / picHeight

img 元素有 naturalWidth 和 naturalHeight 属性，值为图片的原始宽度和高度。但是需要图片先渲染到页面上才能获取。
因此可以考虑获取所点击的缩略图的属性。

在双击缩略图的时候触发方法 viewPic

<div class="img" @click="viewPic(scope.row.url,$event)">
    <img :src="scope.row.url" alt="thumbnail">
</div>

    // 查看大图
    viewPic(src, e){
    
    
      console.log('viewPic', src)
      const img = e.target.querySelector('img') || e.target
      console.log(img)
      this.picSrc = src
      this.picWidth = img.naturalWidth
      this.picHeight = img.naturalHeight
    },

3.使用计算属性计算预览时图片的宽高

使用计算属性能够在依赖的数据发生改变时重新计算。

假设预览时图片的宽度最大为视窗宽度的 90%，
图片的高度最大为视窗高度的 95%。

1. 分别计算图片宽度最大时的缩放比例scaleX = 最大允许宽度 / 图片的原始宽度，和高度最大时的缩放比例 scaleY = 最大允许高度 / 图片的原始高度。
2. 然后取 scaleX, scaleY, 1 中最小的一个作为图片的缩放比例 scale。这里的 1 是因为如果图片本身小于视窗的大小，scaleX 和 scaleY 都会大于1，即图片最后会被放大。取 1 时图片将保持原始大小。
3. 计算经缩放比例 scale 缩放后的图片宽度和高度，返回即可

computed:{
    
    
    // 计算图片的宽度和高度
    picSize(){
    
    
      if(!this.picWidth || !this.picHeight) return {
    
    width:0, height:0}
      const scaleX =  this.screenSize.width * 0.9 / this.picWidth
      const scaleY = this.screenSize.height * 0.95 / this.picHeight 
      const scale = Math.min(scaleX, scaleY, 1)
      console.log(scale)
      const width = this.picWidth * scale + 'px'
      const height = this.picHeight * scale + 'px'
      console.log("picSize", width, height)
      return {
    
     width, height }
    },
  },