vue 实现根据窗口大小自适应图片预览
目录
- 0.data 字段设置
- 1.监听窗口大小的改变,更新 screenSize
- 2.获取图片的原始宽高,更新 picWidth / picHeight
- 3.使用计算属性计算预览时图片的宽高
<!-- 查看大图 -->
<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
预览的图片 srcpicWidth
图片的原始宽度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%。
- 分别计算图片宽度最大时的缩放比例
scaleX = 最大允许宽度 / 图片的原始宽度
,和高度最大时的缩放比例scaleY = 最大允许高度 / 图片的原始高度
。 - 然后取
scaleX, scaleY, 1
中最小的一个作为图片的缩放比例scale
。这里的 1 是因为如果图片本身小于视窗的大小,scaleX
和scaleY
都会大于1,即图片最后会被放大。取 1 时图片将保持原始大小。 - 计算经缩放比例
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 }
},
},