Vue项目中检测手机横竖屏切换的实用方法大揭秘

在 Vue 项目中，可以通过以下步骤来检测手机横屏竖屏的切换： 1. 监听 `resize` 事件： ```javascript mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { if (window.innerWidth > window.innerHeight) { // 横屏 } else { // 竖屏 } } } ``` 2. 使用 `orientationchange` 事件（在移动设备上更适用）： ```javascript mounted() { window.addEventListener('orientationchange', this.handleOrientationChange); }, beforeDestroy() { window.removeEventListener('orientationchange', this.handleOrientationChange); }, methods: { handleOrientationChange() { switch(window.orientation) { case 0: // 竖屏（ portrait ） case 180: // 竖屏（ upside-down portrait ） // 竖屏逻辑 break; case 90: // 横屏（ landscape, left ） case -90: // 横屏（ landscape, right ） // 横屏逻辑 break; } } } ``` 通过上述方法，可以在 Vue 组件中检测到手机屏幕的横竖屏切换，并根据需要执行相应的逻辑处理。 ######[AI写代码神器 | 327点数解答 | 2024-10-17 14:24:05]