首页vue实时监听窗口大小变化

vue实时监听窗口大小变化

时间: 2025-01-11 11:51:56 浏览: 47

### 实现 Vue 中实时监听窗口大小变化在 Vue 应用中，可以通过多种方式实现实时监听窗口大小的变化。以下是几种常见且有效的方法： #### 使用 Mixin 和 Event Bus 方式这种方法适用于多个组件都需要监听窗口大小的情况。可以创建一个 mixin 来集中管理窗口尺寸的监听逻辑。 ```javascript // windowResizeMixin.js export default { data() { return { windowWidth: null, }; }, mounted() { this.updateWindowWidth(); window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { this.updateWindowWidth(); }, updateWindowWidth() { this.windowWidth = document.documentElement.clientWidth; } } } ``` 任何需要监听窗口大小改变的组件都可以引入并使用这个 `windowResizeMixin`[^3]。 #### 利用 Composition API (Vue 3) 对于采用 Composition API 的项目来说，推荐的方式是在 setup 函数内处理这类副作用操作。 ```javascript import { ref, onMounted, onUnmounted } from 'vue'; function useWindowSize() { const width = ref(window.innerWidth); function handleResize() { width.value = window.innerWidth; } onMounted(() => window.addEventListener('resize', handleResize)); onUnmounted(() => window.removeEventListener('resize', handleResize)); return { width }; } export default useWindowSize; ``` 然后可以在单文件组件(SFC)里这样调用它: ```html <template> <div>当前窗口宽度为 {{ size.width }}px</div> </template> <script> import useWindowSize from './useWindowSize' export default { setup() { const size = useWindowSize(); return { ...size }; } }; </script> ``` 这种方式不仅简洁明了，而且更易于测试和维护[^4]。

阅读全文