data(){
return {
screenWidth: document.body.clientWidth
}
},
mounted() {
//监听浏览器大小
let that = this;
window.addEventListener("resize", function() {
return (() => {
window.screenWidth = document.body.clientWidth;
that.screenWidth = window.screenWidth;
console.log("that.screenWidth", that.screenWidth);
})();
});
},
watch: {
//防止因为频繁触发 resize 函数,导致页面很卡的问题
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val;
this.timer = true;
let that = this;
setTimeout(function() {
that.reload();
that.timer = false;
}, 400);
}
}
}
以上是编程学习网小编为您介绍的“vuejs监听当前浏览器大小执行”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vuejs监听当前浏览器大小执行
基础教程推荐
猜你喜欢
- javascript判断两个IP地址是否在同一个网段的实现思路 2023-12-15
- HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述 2024-03-09
- 基于Next.js实现在线Excel的详细代码 2023-12-26
- jquery实现漂浮在网页右侧的qq在线客服插件示例 2023-12-20
- 一个极为简单的requirejs实现方法 2023-12-15
- JavaScript使用HTML5的window.postMessage实现跨域通信例子 2023-12-26
- JS中BOM相关知识点总结(必看篇) 2023-12-01
- 常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数 2024-01-16
- json2.js的初步学习与了解 2023-12-26
- Vue.js从入门到精通第一天 2023-10-08
