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通过Cookie判断页面是否为首次打开 2024-02-12
- CSS实现一个简单loading动画效果 2024-01-03
- Vue指令实现大屏元素分辨率适配详解 2024-02-20
- html5的websockets全双工通信详解学习示例 2024-01-16
- css3动画效果抖动解决方法 2024-01-02
- vue中关于checkbox使用的问题 2023-07-10
- Immer 功能最佳实践示例教程 2024-01-16
- 全面了解CSS 2022-10-16
- Centos 7--pdf2htmlEX安装和配置 2023-10-25
- AJAX分页效果简单实现 2023-02-14