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监听当前浏览器大小执行


基础教程推荐
猜你喜欢
- 深入挖掘Windows脚本技术 2024-02-09
- IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同 2023-12-21
- 微信小程序 wx:for遍历循环使用实例解析 2024-01-06
- AJAX实现图片预览与上传及生成缩略图的方法 2023-01-21
- php – 将html select form的值插入mysql数据库 2023-10-26
- javascript – 客户端转换EDN到JSON(HTML5应用程序消耗的数据库数据) 2023-10-26
- vue 动态路由component 传递变量报错问题解决 2023-07-09
- JavaScript字符串转换数字的方法 2023-08-12
- ajax局部刷新实例 (三种方法推荐) 2023-01-31
- 借助得力工具五分钟快速制作CSS导航菜单 2023-12-27