Vue 实时监听窗口变化 windowresize的两种方法
下面给大家分享两种方法来介绍Vue实时监听窗口变化windowresize，具体内容如下所示：
方法一：
First-step:定义变量
data(){
return{
formLabelWidth:'123px'
}
},
Second-step: 根据生命周期在mounted中绑定窗口变化
mounted(){
constthat=this
window.onresize=()=>{
return(()=>{
window.screenWidth=document.body.clientWidth
that.screenWidth=window.screenWidth
})()
}
},
Third-step: 绑定监听watch
watch:{
screenWidth(val){
if(!this.timer){
this.screenWidth=val
this.timer=true
letthat=this
setTimeout(function(){
//that.screenWidth=that.$store.state.canvasWidth
console.log(that.screenWidth)
//that.init()
that.timer=false
},400)
}
}
},
方法二：在vue.2x里面时候，mounted里面可以直接挂载window.onresize事件。全局监听
mounted(){
window.onresize=()=>{
return(()=>{
this.handleLableWidth();
})()
}
this.handleLableWidth();
},
完全可以做到检测窗口变化
总结
以上所述是小编给大家介绍的Vue实时监听窗口变化windowresize的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。