Vuetify3：监听当前手机还是电脑

我们在开发的时候，实现根据移动设备或PC设备来改编一些交互样式，这个时候我们需要监听宽度，在Vuetify3中可我们可以参考 ​​​​显示 & 平台配合监听即可在窗口缩小的时候判断出手机还是电脑

<template>
  <v-app>
    <div v-if="isMobile">手机端内容</div>
    <div v-else>电脑端内容</div>
  </v-app>
</template>
 
<script setup>
import { ref, onMounted, watch } from 'vue';
const { mobile,width } = useDisplay()
const isMobile = ref(false);
 
const handleResize = () => {
    isMobile.value = width.value <= 770;
};
 
onMounted(() => {
    // 初始调用
    handleResize(); 
    window.addEventListener('resize', handleResize);
});
 
// 组件卸载前移除事件监听
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
 
</script>