vue项目如何监听窗口变化,达到页面自适应?
【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架,也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。
获取窗口宽度:document.body.clientWidth
监听窗口变化:window.onresize
同时回顾一下JS里这些方法:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
我们将document.body.clientWidth赋值给data中自定义的变量:
data:{
screenWidth: document.body.clientWidth
}
在页面mounted时,挂载window.onresize方法:
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}
监听screenWidth属性值的变化,打印并观察screenWidth发生变化的值:
watch:{
screenWidth(val){
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
},400)
}
}
}
好!既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!
【举个例子:div或img图片高度随宽度自适应】
div或img的宽度自适应很简单——设定css里width属性为百分比即可——但是高度呢?父级元素的高度并不是固定的(通常都是子级元素撑开的)
如上图,一个类似【图片库】的功能,当屏幕放大缩小时,我们可以设置外层边框(也就是灰色框框)的宽度为100%,以达到自适应——但高度无法设置,因此我们需要:
数据加载完后,获取图片(或外层框)的宽度
根据这个宽度,设置外层框的高度(如:宽度的60%)
监听窗口screenWidth值的变化,每次变化都重新获取宽度,并重新设置高度
所以,我们只需在前文代码的基础上,添加以下代码,以确保屏幕缩放时,每次监听宽度变化:
mounted() {
// 1、数据首次加载完后 → 获取图片(或外层框)宽度,并设置其高度
this.$nextTick(() => {
// 获取图片(或外层框)
let imgBox = this.$refs.imgBox
// 获取其宽度
let wImgbox = imgBox[0].getBoundingClientRect().width
// 设置其高度(以宽度的60%为例)
this.imgBox.height = 0.6 * wImgbox + 'px'
})
// 2、挂载 reisze 事件 → 屏幕缩放时监听宽度变化
const that = this
window.onresize = () => {
return (() => {
// window.screenWidth = document.body.clientWidth
// that.screenWidth = window.screenWidth
// console.log(that.screenWidth)
this.$nextTick(() => {
let imgBox = this.$refs.imgBox
let wImgbox = imgBox[0].getBoundingClientRect().width
this.imgBox.height = 0.6 * wImgbox + 'px'
})
})()
}
},
最终实现效果如下:
---------------------
作者:前端小讴
来源:CSDN
原文:https://blog.csdn.net/Simon9124/article/details/81117480
版权声明:本文为博主原创文章,转载请附上博文链接!
- vue项目如何监听窗口变化,达到页面自适应?
- 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页
- ideal中如何添加几个不同的项目在同一个idea页面显示(同一个窗口显示多个工程)
- Android 如何让EditText不自动获取焦点 在项目中,一进入一个页面, EditText默认就会自动获取焦点。 那么如何取消这个默认行为呢? 在网上找了好久,有点 监听软键盘事件
- vue监听页面大小变化重新刷新布局
- Vue 实时监听窗口变化 windowresize的两种方法
- ExtJS学习--如何新建一个窗口并达到遮罩住整个页面的效果
- 浅谈VUE监听窗口变化事件的问题
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- 如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。
- 如何解决在java开发中java代码和jsp页面中出现路径因为项目名称的变化(也就是应用名)的问题?
- vue动态数据绑定1--如何监听一个对象的变化
- vue监听路由参数变化更新页面
- div+css如何让页面随着窗口的变化内容位置不变
- vue、如何在组件挂载完成之后在监听data中对象或属性的变化
- 关于VUE监听窗口变化事件问题
- 双重监听俩个值的变化 vue2.0 -- 飞机票项目
- vue项目如何刷新当前页面
- 如何监听浏览器窗口变化
- 在vue项目页面监听div滚动,和设置滚动值