Vue.js如何监听window窗口尺寸变化
监听window窗口变化
VueJs 监听 window.resize 方法,同时窗口拉伸时会频繁触发resize函数,导致页面性能 卡顿 ,可以搭配setTimeout来提升性能
data() {
return {
screenWidth: document.body.clientWidth,//初始化宽度
}
},在mounted中挂载resize方法
var _this = this
window.onresize = () => {
return (() => {
_this .screenWidth = document.body.clientWidth
})()
}watch 监听 data中或props传递的数据
screenWidth(){
if (!this.timer) {
this.timer = true
let _this= this
setTimeout(function () {
... (执行的语句)
_this.timer = false
}, 500)
}
}附:vue实时监听窗口宽度变化
获取窗口宽度: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)
}
}
}上面的方案每隔0.4秒会获取一次屏幕的宽度,并将宽度值赋值给data中的screenWide,就可以直接通过this.screenWide获取了
好!既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!
总结
到此这篇关于Vue.js如何监听window窗口尺寸变化的文章就介绍到这了,更多相关Vue监听window窗口尺寸内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Nuxt pages下不同的页面对应layout下的页面布局操作
这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
这篇文章主要介绍了Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
electron-vite工具打包后如何通过内置配置文件动态修改接口地址
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦,这篇文章主要介绍了electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法,需要的朋友可以参考下2024-05-05
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
这篇文章主要介绍了SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题,需要的朋友可以参考下2018-01-01


最新评论