方法一:使用 window.onresize
结合 Vue 实例的生命周期钩子(不推荐,存在覆盖风险)
虽然可以直接使用原生的 window.onresize
事件来监听窗口大小变化,但这种方式在 Vue 项目中有一些局限性,因为如果在多个地方都这样使用,后赋值的会覆盖前面的,容易导致一些不可预期的问题。不过简单了解一下其基本实现方式如下:
<template><div><!-- 这里放置页面内容 --></div>
</template><script>
export default {data() {return {windowWidth: document.documentElement.clientWidth,windowHeight: document.documentElement.clientHeight};},mounted() {const that = this;window.onresize = function () {that.windowWidth = document.documentElement.clientWidth;that.windowHeight = document.documentElement.clientHeight;that.handleResize(); // 调用处理尺寸变化的函数};},methods: {handleResize() {console.log(`窗口宽度: ${this.windowWidth}px,高度: ${this.windowHeight}px`);// 在这里可以添加更多基于新尺寸的业务逻辑,比如根据不同尺寸显示不同的组件等}}
};
</script>
方法二:使用 window.addEventListener('resize', callback)
(推荐)
使用 addEventListener
可以避免覆盖已有 resize
事件监听器的问题,并且更符合现代 JavaScript 开发习惯,在 Vue 项目中也是更常用的方式。以下是示例代码:
<template><div><!-- 这里放置页面内容 --></div>
</template><script>
export default {data() {return {windowWidth: document.documentElement.clientWidth,windowHeight: document.documentElement.clientHeight};},mounted() {const that = this;window.addEventListener('resize', function () {that.windowWidth = document.documentElement.clientWidth;that.windowHeight = document.documentElement.clientHeight;that.handleResize();});},beforeDestroy() {window.removeEventListener('resize', this.handleResize); // 在组件销毁时移除监听器,避免内存泄漏},methods: {handleResize() {console.log(`窗口宽度: ${this.windowWidth}px,高度: ${this.windowHeight}px`);// 在这里添加基于新尺寸的业务逻辑}}
};
</script>