//定义screenWidth
data() {
return {
screenWidth: document.body.clientWidth,
};
},
//打开监听
mounted() {
const that = this
window.addEventListener("resize", function() {
return(() => {
window.screenWidth = document.body.clientWidth;
that.screenWidth = window.screenWidth;
})();
});
// 只进入页面监听
if (document.body.clientWidth < 1500) {
this.collapseChage();
}
}
//监听事件,为防止调用泰国频繁,加了计时器
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)
if(that.screenWidth < 1500) {
that.collapse = true;
bus.$emit('collapse', that.collapse);
} else {
that.collapse = false;
bus.$emit('collapse', that.collapse);
}
that.timer = false
}, 600)
}
}
},