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监听当前浏览器大小执行
基础教程推荐
猜你喜欢
- js中将多个语句写成一个语句的两种方法小结 2023-12-03
- URL地址中的#符号使用说明 2024-02-08
- Ajax获取php返回json数据动态生成select下拉框的实例 2023-02-23
- HTML详细笔记 2023-10-27
- Javascript 实现复制(Copy)动作方法大全 2024-01-04
- vue使用GraphVis开发无限拓展的关系图谱的实现 2024-01-06
- CSS3实现王者荣耀匹配人员加载页面的方法 2024-04-03
- layui tableSelect.js实现数据表格下拉框(单选或者多选) 2023-11-30
- 基于js中的存储键值对以及注意事项介绍 2024-02-08
- Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据) 2022-12-13