在 Airi 中使用 VueUse useQRCode响应式生成二维码的完整实战指南【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读useQRCode是 VueUse 生态中vueuse/integrations集成包提供的二维码响应式封装底层基于qrcode库将一段文本实时编码为 Data URL并直接以 Vue 响应式 ref 的形式暴露给组件使用。本文以 Airi 仓库内的.agents/skills/vueuse-functions/references/useQRCode.md参考文档为主线结合仓库实际的依赖锁定与技能使用规范完整讲解useQRCode的安装、静态/响应式两种调用方式、类型声明、参数配置以及如何在 Vue 3 组件中落地一个实时刷新的二维码输入框场景。读完本文你将能熟练使用useQRCode在任意 Vue 3 项目中低成本实现二维码生成能力。useQRCode 是什么useQRCode是qrcode库的 Vue 响应式包装器Wrapper。qrcode本身是一个纯 JavaScript 的二维码生成库而useQRCode负责把它与 Vue 的响应式系统对接传入一段文本可以是普通字符串、ref 或 getter返回一个ShallowRefstring其value就是可直接赋值给img src的二维码 Data URL。在 Airi 仓库中useQRCode被归类在Integrations分组下。根据 SKILL.md 的定义Integrations下的函数统一标记为EXTERNAL调用级别只有在用户已经安装了对应外部依赖时才使用。也就是说使用useQRCode前必须先显式安装qrcode依赖这与 VueUse 核心包的AUTO级别满足条件即可自动使用有明显区别。这一约定在 useQRCode.md 中同样通过category: Integrations元数据得到印证。安装 qrcode 依赖由于useQRCode属于外部集成函数qrcode是它的 peer 依赖需要在项目中单独安装npm i qrcode^1安装版本要求为^1主版本线。这一点在仓库的 pnpm-lock.yaml 中可以得到交叉验证Airi 锁定的vueuse/integrations14.4.0声明了qrcode: ^1.5作为 peer 依赖并且peerDependenciesMeta中将其标记为optional: true——即qrcode是可选 peer 依赖只有真正用到useQRCode这类二维码函数时才需要安装不会强制拖入无关依赖。如果你的项目使用 pnpmAiri 主仓库即使用 pnpm workspace见根目录 pnpm-workspace.yaml等价命令为pnpm add qrcode^1安装完成后从vueuse/integrations中导入useQRCode即可。基础用法静态文本生成最简单的场景是传入一个普通字符串qrcode将是一个持有 Data URL 的 refimport { useQRCode } from vueuse/integrations/useQRCode // qrcode 会是一个 Data URL 类型的 ref const qrcode useQRCode(text-to-encode)此时qrcode.value形如data:image/png;base64,....直接将其绑定到图片标签即可显示img :srcqrcode altQR Code /由于返回的是 ref模板中的:src会自动解包无需手动写.value。这是useQRCode相对直接调用qrcode.toDataURL()的最大优势省去了手动维护异步回调与 DOM 更新的样板代码。响应式用法跟随源 ref 自动刷新useQRCode真正的价值在于响应式联动。传入一个 Vue ref文档示例使用shallowRef当源 ref 的文本变化时返回的二维码 Data URL ref 会随之自动重新编码并更新import { useQRCode } from vueuse/integrations/useQRCode import { shallowRef } from vue const text shallowRef(text-to-encode) const qrcode useQRCode(text)配合一个输入框即可实现输入即生成的实时二维码预览input v-modeltext typetext / img :srcqrcode altQR Code /用户每敲入一个字符textref 变化useQRCode内部监听到变化后重新调用qrcode.toDataURL()qrcoderef 更新img同步刷新。整个链路完全由 Vue 响应式驱动不需要手动事件监听或防抖处理。这里使用shallowRef是有意义的二维码编码结果只关心整段文本的变化不需要对字符串做深层响应式代理shallowRef避免了对大字符串的递归代理开销。从类型签名看useQRCode的第一个参数类型是MaybeRefOrGetterstring因此除了字符串和 ref你还可以传入一个返回字符串的 getter 函数比如组合其他响应式状态动态拼出编码内容。类型声明与参数签名useQRCode.md 给出了完整的类型声明/** * Wrapper for qrcode. * * param text * param options */ export declare function useQRCode( text: MaybeRefOrGetterstring, options?: QRCode.QRCodeToDataURLOptions, ): ShallowRefstring, string逐项解读参数类型说明textMaybeRefOrGetterstring要编码的文本可以是普通字符串、Refstring或返回字符串的 getter 函数optionsQRCode.QRCodeToDataURLOptions可选透传给底层qrcode库toDataURL()的编码选项返回值ShallowRefstring, string二维码 Data URL直接用于img src等场景QRCode.QRCodeToDataURLOptions是qrcode库导出的选项类型常用字段包括errorCorrectionLevel纠错等级取值low | medium | quartile | high分别对应 L / M / Q / H。等级越高二维码在脏污、遮挡情况下越容易被扫描识别但图案密度也随之增加。默认medium。margin二维码四周的空白边距单位模块数默认4。width输出图片宽度像素高度按比例自动计算。color.dark/color.light前景色与背景色支持 CSS 颜色字符串如#000000/#ffffff可配合深色主题定制。type输出 Data URL 的 MIME 类型如image/png、image/jpeg默认 PNG。rendererOpts.qualityJPEG 等有损格式的压缩质量0 到 1。例如生成一个高纠错、带自定义配色的大尺寸二维码const qrcode useQRCode(text, { errorCorrectionLevel: high, margin: 2, width: 512, color: { dark: #335eea, light: #ffffff, }, })组合成真实组件将上述内容整合一个最小可用的二维码生成组件如下script setup langts import { shallowRef } from vue import { useQRCode } from vueuse/integrations/useQRCode const text shallowRef(https://example.com) const qrcode useQRCode(text, { errorCorrectionLevel: high }) /script template div input v-modeltext typetext placeholder输入要编码的文本 / img :srcqrcode alt实时二维码预览 / /div /template此模式适用于 Airi 仓库中所有 Vue 3 应用例如 stage-web 的 Web 端、stage-pocket 的移动端以及 ui-server-auth 的鉴权界面。凡是需要分享链接 / 登录凭证 / 设备配对码以二维码形式呈现的页面都可以直接复用这套响应式组合式函数逻辑而无需为每个页面重复编写qrcode.toDataURL()的异步调用与状态管理代码。使用注意事项结合仓库技能规范 SKILL.md 的Invocation规则使用useQRCode时有几点值得注意依赖必须先装useQRCode的调用级别是EXTERNAL仅当项目已安装qrcode时才应使用qrcode在vueuse/integrations中属于可选 peer 依赖见 pnpm-lock.yaml漏装会导致运行时找不到模块。SSR 环境注意二维码编码在服务端渲染时同样可以执行qrcode是纯 JS 实现但最终绑定 Data URL 到img属于客户端行为SSR 场景下应确保数据在 hydration 后可用。体积权衡qrcode是独立的外部依赖如果页面只需展示一张预生成的静态二维码图片直接上传图片文件通常比引入整个编码库更轻量useQRCode的价值在内容动态变化、需要实时生成的场景下才最大化。总结useQRCode以极小的 API 面一个函数、两个参数完成了文本 → 二维码 Data URL的完整响应式闭环是 VueUse 集成类组合式函数的典型范例。本文覆盖了它的依赖安装qrcode^1、静态与响应式两种调用方式、类型签名与QRCodeToDataURLOptions常用配置并给出了可直接落地的 Vue 组件示例。你可以在仓库的 useQRCode.md 参考文档与 SKILL.md 技能清单中找到更多上下文将这一模式灵活运用到 Airi 各前端应用的实际业务中。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Airi 中使用 VueUse useQRCode：响应式生成二维码的完整实战指南
在 Airi 中使用 VueUse useQRCode响应式生成二维码的完整实战指南【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读useQRCode是 VueUse 生态中vueuse/integrations集成包提供的二维码响应式封装底层基于qrcode库将一段文本实时编码为 Data URL并直接以 Vue 响应式 ref 的形式暴露给组件使用。本文以 Airi 仓库内的.agents/skills/vueuse-functions/references/useQRCode.md参考文档为主线结合仓库实际的依赖锁定与技能使用规范完整讲解useQRCode的安装、静态/响应式两种调用方式、类型声明、参数配置以及如何在 Vue 3 组件中落地一个实时刷新的二维码输入框场景。读完本文你将能熟练使用useQRCode在任意 Vue 3 项目中低成本实现二维码生成能力。useQRCode 是什么useQRCode是qrcode库的 Vue 响应式包装器Wrapper。qrcode本身是一个纯 JavaScript 的二维码生成库而useQRCode负责把它与 Vue 的响应式系统对接传入一段文本可以是普通字符串、ref 或 getter返回一个ShallowRefstring其value就是可直接赋值给img src的二维码 Data URL。在 Airi 仓库中useQRCode被归类在Integrations分组下。根据 SKILL.md 的定义Integrations下的函数统一标记为EXTERNAL调用级别只有在用户已经安装了对应外部依赖时才使用。也就是说使用useQRCode前必须先显式安装qrcode依赖这与 VueUse 核心包的AUTO级别满足条件即可自动使用有明显区别。这一约定在 useQRCode.md 中同样通过category: Integrations元数据得到印证。安装 qrcode 依赖由于useQRCode属于外部集成函数qrcode是它的 peer 依赖需要在项目中单独安装npm i qrcode^1安装版本要求为^1主版本线。这一点在仓库的 pnpm-lock.yaml 中可以得到交叉验证Airi 锁定的vueuse/integrations14.4.0声明了qrcode: ^1.5作为 peer 依赖并且peerDependenciesMeta中将其标记为optional: true——即qrcode是可选 peer 依赖只有真正用到useQRCode这类二维码函数时才需要安装不会强制拖入无关依赖。如果你的项目使用 pnpmAiri 主仓库即使用 pnpm workspace见根目录 pnpm-workspace.yaml等价命令为pnpm add qrcode^1安装完成后从vueuse/integrations中导入useQRCode即可。基础用法静态文本生成最简单的场景是传入一个普通字符串qrcode将是一个持有 Data URL 的 refimport { useQRCode } from vueuse/integrations/useQRCode // qrcode 会是一个 Data URL 类型的 ref const qrcode useQRCode(text-to-encode)此时qrcode.value形如data:image/png;base64,....直接将其绑定到图片标签即可显示img :srcqrcode altQR Code /由于返回的是 ref模板中的:src会自动解包无需手动写.value。这是useQRCode相对直接调用qrcode.toDataURL()的最大优势省去了手动维护异步回调与 DOM 更新的样板代码。响应式用法跟随源 ref 自动刷新useQRCode真正的价值在于响应式联动。传入一个 Vue ref文档示例使用shallowRef当源 ref 的文本变化时返回的二维码 Data URL ref 会随之自动重新编码并更新import { useQRCode } from vueuse/integrations/useQRCode import { shallowRef } from vue const text shallowRef(text-to-encode) const qrcode useQRCode(text)配合一个输入框即可实现输入即生成的实时二维码预览input v-modeltext typetext / img :srcqrcode altQR Code /用户每敲入一个字符textref 变化useQRCode内部监听到变化后重新调用qrcode.toDataURL()qrcoderef 更新img同步刷新。整个链路完全由 Vue 响应式驱动不需要手动事件监听或防抖处理。这里使用shallowRef是有意义的二维码编码结果只关心整段文本的变化不需要对字符串做深层响应式代理shallowRef避免了对大字符串的递归代理开销。从类型签名看useQRCode的第一个参数类型是MaybeRefOrGetterstring因此除了字符串和 ref你还可以传入一个返回字符串的 getter 函数比如组合其他响应式状态动态拼出编码内容。类型声明与参数签名useQRCode.md 给出了完整的类型声明/** * Wrapper for qrcode. * * param text * param options */ export declare function useQRCode( text: MaybeRefOrGetterstring, options?: QRCode.QRCodeToDataURLOptions, ): ShallowRefstring, string逐项解读参数类型说明textMaybeRefOrGetterstring要编码的文本可以是普通字符串、Refstring或返回字符串的 getter 函数optionsQRCode.QRCodeToDataURLOptions可选透传给底层qrcode库toDataURL()的编码选项返回值ShallowRefstring, string二维码 Data URL直接用于img src等场景QRCode.QRCodeToDataURLOptions是qrcode库导出的选项类型常用字段包括errorCorrectionLevel纠错等级取值low | medium | quartile | high分别对应 L / M / Q / H。等级越高二维码在脏污、遮挡情况下越容易被扫描识别但图案密度也随之增加。默认medium。margin二维码四周的空白边距单位模块数默认4。width输出图片宽度像素高度按比例自动计算。color.dark/color.light前景色与背景色支持 CSS 颜色字符串如#000000/#ffffff可配合深色主题定制。type输出 Data URL 的 MIME 类型如image/png、image/jpeg默认 PNG。rendererOpts.qualityJPEG 等有损格式的压缩质量0 到 1。例如生成一个高纠错、带自定义配色的大尺寸二维码const qrcode useQRCode(text, { errorCorrectionLevel: high, margin: 2, width: 512, color: { dark: #335eea, light: #ffffff, }, })组合成真实组件将上述内容整合一个最小可用的二维码生成组件如下script setup langts import { shallowRef } from vue import { useQRCode } from vueuse/integrations/useQRCode const text shallowRef(https://example.com) const qrcode useQRCode(text, { errorCorrectionLevel: high }) /script template div input v-modeltext typetext placeholder输入要编码的文本 / img :srcqrcode alt实时二维码预览 / /div /template此模式适用于 Airi 仓库中所有 Vue 3 应用例如 stage-web 的 Web 端、stage-pocket 的移动端以及 ui-server-auth 的鉴权界面。凡是需要分享链接 / 登录凭证 / 设备配对码以二维码形式呈现的页面都可以直接复用这套响应式组合式函数逻辑而无需为每个页面重复编写qrcode.toDataURL()的异步调用与状态管理代码。使用注意事项结合仓库技能规范 SKILL.md 的Invocation规则使用useQRCode时有几点值得注意依赖必须先装useQRCode的调用级别是EXTERNAL仅当项目已安装qrcode时才应使用qrcode在vueuse/integrations中属于可选 peer 依赖见 pnpm-lock.yaml漏装会导致运行时找不到模块。SSR 环境注意二维码编码在服务端渲染时同样可以执行qrcode是纯 JS 实现但最终绑定 Data URL 到img属于客户端行为SSR 场景下应确保数据在 hydration 后可用。体积权衡qrcode是独立的外部依赖如果页面只需展示一张预生成的静态二维码图片直接上传图片文件通常比引入整个编码库更轻量useQRCode的价值在内容动态变化、需要实时生成的场景下才最大化。总结useQRCode以极小的 API 面一个函数、两个参数完成了文本 → 二维码 Data URL的完整响应式闭环是 VueUse 集成类组合式函数的典型范例。本文覆盖了它的依赖安装qrcode^1、静态与响应式两种调用方式、类型签名与QRCodeToDataURLOptions常用配置并给出了可直接落地的 Vue 组件示例。你可以在仓库的 useQRCode.md 参考文档与 SKILL.md 技能清单中找到更多上下文将这一模式灵活运用到 Airi 各前端应用的实际业务中。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考