VueJs监听window.resize方法示例
Vuejs本身就是一个MVVM的框架。
但是在监听window上的事件时，往往会显得力不从心。
比如这次是window.resize
恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。
问题：今天我也遇到了这样一个问题，是关于canvas自适应。根据窗口的变化去变化canvas的宽度
备注：重要的问题说三遍解决框架内的bug先说框架版本版本版本（这里用的Vue2.x、ES6）
解决方案：
第一步：先在data中去定义一个记录宽度是属性
data:{
screenWidth:document.body.clientWidth//这里是给到了一个默认值（这个很重要）
}
第二步：我们需要讲reisze事件在vuemounted的时候去挂载一下它的方法
mounted(){
constthat=this
window.onresize=()=>{
return(()=>{
window.screenWidth=document.body.clientWidth
that.screenWidth=window.screenWidth
})()
}
}
第三步：watch去监听这个属性值的变化，如果发生变化则讲这个val传递给this.screenWidth
watch:{
screenWidth(val){
this.screenWidth=val
}
}
第四步：优化因为频繁触发resize函数，导致页面很卡的问题
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)
}
}
}
最后一步：去看看你想要的结果吧~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。