当前位置: 首页 > news >正文

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>

http://www.lryc.cn/news/390892.html

相关文章:

  • Zabbix 配置钉钉告警
  • TTL转RS232与USB转TTL
  • 【力扣 896】单调数列 C++题解(循环)
  • 代码随想录Day71(图论Part07)
  • [Mdp] lc 494. 目标和(01背包变种+dp+dfs)
  • React vs Vue:谁是构建现代Web应用的王者?
  • Linux CentOS 宝塔中禁用php8.2的eval函数详细图文教程
  • Matlab 中 fftshift 与 ifftshift
  • 被裁了(9年)
  • 13. Revit API: Filter(过滤器)
  • hadoop 3.X 分布式HA集成Kerbos(保姆级教程)
  • VDS虚拟导播切换台软件
  • UE4_材质_使用彩色半透明阴影
  • arthas监控工具笔记(二)monior等
  • 【mybatis】mybatis-plus中主键生成策略
  • 模型情景制作-如何制作棕榈树
  • # mysql 中文乱码问题分析
  • [小试牛刀-习题练]《计算机组成原理》之指令系统
  • JAVA 实现拍卖框架及拍卖详情流程介绍(包含代码示咧)
  • 力扣1177.构建回文串检测
  • Vue跨域获取ip和ip位置城市等归属地信息
  • 缺失的第一个正数
  • mac 上 Docker Desktop的免费开源的替代工具Colima
  • C语言 -- 函数
  • Cesium 立式雷达扫描
  • Oracle HTTP Server(OHS)与Oracle数据库的紧密绑定
  • mmcv安装失败及解决方案
  • 国产强大免费WAF, 社区版雷池动态防护介绍
  • 【Django】网上蛋糕项目商城-首页
  • Vue 父子页面使用指南