使用vue3检测设备方向和方向变化

在 Vue 3 中，你可以使用 @media 查询和 window.matchMedia 方法来检测设备方向和方向变化。以下是一个示例：

<template>
  <div>
    <p>当前方向: {
   {
    currentOrientation }}</p>
  </div>
</template>

<script>
import {
    onMounted, reactive } from 'vue';

export default {
   
  name: 'MyComponent',
  setup() {
   
    const state = reactive({
   
      currentOrientation: ''
    });

    const handleOrientationChange = () => {
   
      state.currentOrientation = window.matchMedia('(orientation: portrait)').matches
        ? '竖直'
        : '横向';
    };

    onMounted(() => {
   
      handleOrientationChange(); // 初始化方向

      window.addEventListener('resize', handleOrientationChange);
    });

    return {
   
      currentOrientation: state.currentOrientation
    };
  }
};
</script>

在这个示例中，我们使用 Vue 3 的 onMounted 钩子函数来在组件挂载时执行初始化代码。通过调用 handleOrientationChange 函数，我们在初始化时获取并设置当前的设备方向。

然后，我们通过 window.addEventListener 方法监听 resize 事件，以便在设备方向发生变化时更新方向值。

在 handleOrientationChange 函数中，我们使用 window.matchMedia 方法传入一个 @media 查询字符串，(orientation: portrait) 表示竖直方向。我们根据 window.matchMedia('(orientation: portrait)').matches 的返回值来判断当前方向是竖直还是横向，并将结果赋给 state.currentOrientation。

最后，在组件的模板中，我们将当前方向 currentOrientation 渲染到页面上。

请注意，window.matchMedia 的兼容性可能因不同浏览器而异，因此你可能需要根据实际情况进行测试和调整。