ps做网站首页步骤手机优化器
我们在开发的时候，实现根据移动设备或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>