vue监听屏幕尺寸变化问题,window.onresize很简单
作者：nilmao
这篇文章主要介绍了vue监听屏幕尺寸变化问题,window.onresize很简单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue监听屏幕尺寸变化
>> 可在任意组件中使用
1.在data中定义一个变量，用于记录屏幕尺寸；
data(){
return{
screenWidth: null,
}
}且做好定义为 null
2.使用 window.onresize 方法获取屏幕尺寸；
mounted() {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},需要在 mounted() 钩子中
3.使用 watch 方法即可实时监听屏幕尺寸；
watch: {
screenWidth: {
handler: function (val) {
if (val < 900) {
console.log(val+'屏幕宽度小于900px')
} else {
console.log(val+'屏幕宽度大于900px')
}
},
immediate: true,
deep:true
},
}搞定！
window.onresize无效问题
vue中使用window.onresize时无效，由于使用多次 导致后面将之前的所覆盖
解决
使用window.addEventListener() 即可，
代码如下：
mounted:{
// 绑定resize
window.addEventListener('resize', ()=>{
// 书写代码内容
})
},
destoryed:{
// 解绑resize
window.removeEventListener('resize', ()=>{
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。