我们在开发的时候，实现根据移动设备或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>
