监听页面宽度,执行操作

//定义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)
				}
			}

		},





 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值