vue3 vueUse 连接蓝牙

目录

vueuse安装:

useBluetooth: 调用蓝牙API

扫描周期设备

选择设备配对 

连接成功



vue3的网页项目连接电脑或者手机上的蓝牙设备,使用vueUse库,可以快速检查连接蓝牙设备。

vueUse库使用参考:

VueUse工具库 常用api-CSDN博客

vueuse安装:

npm install -D @vueuse/core

或者
pnpm add @vueuse/core

使用关于window相关的api 

useBluetooth: 调用蓝牙API

在需要用vue文件导入:
import {useBluetooth, useDevicesList} from "@vueuse/core";

检查当前设备是否支持蓝牙 xx.vue

<template><div class="about flex flex-col"><h1> 蓝牙连接功能测试</h1><div><el-button size="default" class="mr-3">打开蓝牙</el-button></div><div><el-text type="primary" size="large" >蓝牙可用状态:{{ isSupported ? '当前设备支持蓝牙' : '当前设备不支持蓝牙' }}</el-text></div></div>
</template><script setup lang="ts">import {useBluetooth, useDevicesList} from "@vueuse/core";const {isSupported,// check if bluetooth is supportedisConnected, // check if connected, reactivedevice, // device object, reactiverequestDevice, // function to request device, returns a promiseserver, // handle services, reactiveerror // error helper, reactive
} = useBluetooth({acceptAllDevices: true,
});
console.log(device)
</script><style>
/*@media (max-width: 1024px) {.about{margin-top:300px;}
}*/@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

我的电脑确实是有蓝牙模块

扫描周期设备

还是上面useBluetooth对象,调用requestDevice()自动弹窗一个扫描窗。

<script setup lang="ts">import {useBluetooth} from "@vueuse/core";const {isConnected,isSupported,device,requestDevice,error,
} = useBluetooth({acceptAllDevices: true,
})
</script><template><div class="grid grid-cols-1 gap-x-4 gap-y-4"><div>{{ isSupported ? 'Bluetooth Web API Supported' : 'Your browser does not support the Bluetooth Web API' }}</div><div v-if="isSupported"><button @click="requestDevice()">扫描周边蓝牙设备</button></div><div v-if="device"><p>已连接蓝牙设备名: {{ device.name }}</p></div><div v-if="isConnected" class="bg-green-500 text-white p-3 rounded-md"><p>已连接</p></div><div v-if="!isConnected" class="bg-orange-800 text-white p-3 rounded-md"><p>未连接</p></div><div v-if="error"><div>出错:</div><pre><code class="block p-5 whitespace-pre">{{ error }}</code></pre></div></div>
</template>

选择设备配对 

点击需要连接设备,点击:配对

连接成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/312883.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Re65:读论文 GPT-3 Language Models are Few-Shot Learners

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文全名&#xff1a;Language Models are Few-Shot Learners ArXiv网址&#xff1a;https://arxiv.org/abs/2005.14165 2020 NeurIPS&#xff1a;https://papers.nips.cc/paper/2020/hash/1457c0d6bfcb49674…

组织机构代码是哪几位?营业执照怎么看组织机构代码?

组织机构代码是哪几位? 组织机构代码通常指的是组织机构代码证上的一组特定数字&#xff0c;它用于唯一标识一个组织或机构。在中国&#xff0c;组织机构代码由9位数字组成&#xff0c;前8位是本体代码&#xff0c;最后1位是校验码。这组代码是按照国家有关标准编制的&#x…

自定义鼠标软件 SteerMouse最新完整激活版

SteerMouse是一款实用的Mac OS X系统辅助工具&#xff0c;可以帮助用户自定义鼠标和触控板的设置&#xff0c;提高使用效率。它提供了多种功能&#xff0c;如自定义按钮、滚轮和光标速度&#xff0c;以及调整灵敏度等&#xff0c;使用户能够根据自己的需求和习惯进行优化。 Ste…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第四套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第四套 (共9套&#xff0c;有答案和解析&#xff0c;答案非官方&#xff0c;仅供参考&#xff09;&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadida…

vue2知识点1 ———— (vue指令,vue的响应式基础)

vue2的知识点&#xff0c;更多前端知识在主页&#xff0c;还有其他知识会持续更新 Vue 指令 Vue指令是Vue.js中的一个重要概念&#xff0c;用于向DOM元素添加特定行为或功能。Vue指令以v-开头&#xff0c;例如v-bind、v-if、v-for等。 v-bind 动态绑定属性 用法&#xff1a…

Springboot+Vue项目-基于Java+MySQL的在线视频教育平台系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

虚幻引擎源码版安装下载,点击GenerateProjectFiles.bat报错 error NU1101NuGet包问题解决参考方案

开发环境配置与源码安装使用 安装VS2022 按照官方文档安装需要的vs配置 虚幻引擎源代码下载 Epic里面下载的引擎与源代码引擎区别&#xff1a;Epic里面下载的引擎是已经编译过的它的源代码访问权限不完整&#xff0c;源代码版本提供比较完整引擎代码&#xff0c;并且可以修…

【LeetCode热题100】【回溯】单词搜索

题目链接&#xff1a;79. 单词搜索 - 力扣&#xff08;LeetCode&#xff09; 要在一个二维数组里面找到一条单词路径&#xff0c;可以先遍历二维数组找到单词入口&#xff0c;然后往上下左右深度遍历&#xff0c;访问过的元素直接修改成字符串结束符&#xff0c;访问完改回去 …

JVM 方法调用之方法分派

JVM 方法调用之方法分派 文章目录 JVM 方法调用之方法分派1.何为分派2.静态分派3.动态分派4.单分派与多分派5.动态分派的实现 1.何为分派 在上一篇文章《方法调用之解析调用》中讲到了解析调用&#xff0c;而解析调用是一个静态过程&#xff0c;在类加载的解析阶段就确定了方法…

Scala 02——Scala OOP

文章目录 Scala 02——Scala OOP前序类1. 类的基本结构2. 普通类和数据类的区别 继承1. extends2. override 抽象类抽象类的特点 单例对象1. 定义2. 场景3. 方法3.1 方法定义3.2 方法调用 特质1. 抽象类和特质的区别2. 强制混入语法3. 静态混入和动态混入 内部类Java和Scala内部…

大话设计模式之单例模式

单例模式是一种创建型设计模式&#xff0c;它确保类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。 单例模式通常在以下情况下使用&#xff1a; 当一个类只能有一个实例&#xff0c;并且客户端需要访问该实例时。当该唯一实例需要被公开访问&#xff0c;以便在…

用Skimage学习数字图像处理(021):图像特征提取之线检测(下)

本节是特征提取之线检测的下篇&#xff0c;讨论基于Hough变换的线检测方法。首先简要介绍Hough变换的基本原理&#xff0c;然后重点介绍Skimage中含有的基于Hough变换的直线和圆形检测到实现。 目录 10.4 Hough变换 10.4.1 原理 10.4.2 实现 10.4 Hough变换 Hough变换&…

WebGL 2.0相较于1.0有什么不同?

作者&#xff1a;STANCH 1.概述 WebGL 1.0自推出以来&#xff0c;已成为广泛支持的Web标准&#xff0c;既能跨平台&#xff0c;还免版税。它通过插件为Web浏览器带来高质量的3D图形&#xff0c;这是迄今为止市场上使用最广泛的Web图形&#xff0c;并得到Apple&#xff0c;Goog…

使用SpringBoot将中国地震台网数据保存PostGIS数据库实践

目录 前言 一、数据转换 1、Json转JavaBean 2、JavaBean与数据库字段映射 二、空间数据表设计 1、表结构设计 三、PostGIS数据保存 1、Mapper接口定义 2、Service逻辑层实现 3、数据入库 4、运行实例及结果 总结 前言 在上一篇博客中基于Java的XxlCrawler网络信息爬…

Resilience中的RateLimiter

Resilience中的RateLimiter 一、RateLimiter&#xff08;限流&#xff09;1.常见的限流算法漏桶算法&#xff08;Leaky Bucket&#xff09;令牌桶算法&#xff08;Token Bucket&#xff09;——Spring cloud 默认使用该算法滚动时间窗口&#xff08;tumbling time window&#…

GmSSL-3.1.1编译

1.源码下载&#xff1a; 下载地址&#xff1a;https://github.com/guanzhi/GmSSL/releases选择对应版本下载。 ​ 2.选择要下载的源码包&#xff1a; ​ 2.编译&#xff1a; 2.1 windows编译&#xff1a;打开vs命令行&#xff0c;选择想要编译的版本&#xff0c;x86或x64…

守望先锋2账号注册教程 战网国际服注册守望先锋2账号步骤

守望先锋2账号注册教程 战网国际服注册守望先锋2账号步骤 守望先锋2是一款由暴雪娱乐公司开发的多人第一人称射击游戏&#xff0c;是守望先锋的续作&#xff0c;故事发生在未来&#xff0c;各种英雄为保卫地球而战。守望先锋2是款不断进化的游戏&#xff0c;带来极致的射击体…

【网络】Burpsuite学习笔记

文章目录 1.介绍1.1 正常客户端与服务端通信&BurpSuite代理后1.2 下载激活参考地址1.3 代理设置1.4 Proxy SwitchyOmega 使用1.4.1 新建情景模式1.4.2 设置代理1.4.2 应用选项 1.5 FoxyProxy 使用1.6 安装证书1.6.1 方式一1.6.2 方式二1.6.3 浏览器安装证书1.6.4 或者直接双…

面试突击---MySQL索引

面试突击---MYSQL索引 面试表达技巧&#xff1a;1、谈一下你对于mysql索引的理解&#xff1f;&#xff08;为什么mysql要选择B树来存储索引&#xff09;2、索引有哪些分类&#xff1f;3、聚簇索引与非聚簇索引4、回表、索引覆盖、最左匹配原则、索引下推&#xff08;1&#xff…

MATLAB 点云体素滤波 (58)

MATLAB 体素滤波 (58) 一、基本原理二、算法实现1.代码数据的海量性始终是点云处理时需要面临的一个大问题,严重的时间消耗和内存占用影响了点云处理的发展,当然了,点云数量主要应该看项目的实际需求,若是对细节要求较高,那么点云数量不可过少,但是要求过低时,我们就可…