asai-vue-qrcode — 二维码生成组件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-qrcode | src/index.ts | AsaiVueQrcode → { AsaiQRCode, AsaiQRCodeCanvas, AsaiQRCodeImg, QRCode } | Feature |

概述

asai-vue-qrcode 基于 qrcode 库提供 Canvas / Img 两种渲染组件及编程式 API，用于许可证页等低频二维码场景。

集成方式

// monorepo — webclient/src/App.vue（首屏同步）
import AsaiVueQrcode from './plugs/asai-vue-qrcode/src/index';
// npm
// import { AsaiQRCode, QRCode } from '@estun/asai-vue-qrcode';

useProvide({ plugs: { AsaiVueQrcode } });
const { AsaiQRCode } = ujt.$fn.AsaiVueQrcode;

独立性约束

• 禁止 cross-import 其它 plugs/*。
• qrcode 为 npm 依赖，在组件 chunk 与编程式 API 内按需加载。

主要 API / 导出

| 导出 | 说明 | |------|------| | AsaiQRCode | 通用组件（async） | | AsaiQRCodeCanvas | Canvas 渲染（async） | | AsaiQRCodeImg | DataURL img（async） | | QRCode.toDataURL/toCanvas/toString | 编程式 Promise API | | getQRCodeLib() | 内部 import('qrcode') |

性能说明

• 首屏同步注册入口对象，但三个 Vue 组件均为 defineAsyncComponent，含 qrcode 的 chunk 首次渲染才加载。
• 编程式 QRCode.* 内部 import('qrcode')，与组件 chunk 共享依赖。
• 低频页面（如 cocontrol 许可证）不拖慢主包体积。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "dependencies": {
    "qrcode": "^1.5.0"
  }
}

Props（attr）

| 参数 | 默认值 | 说明 | |------|--------|------| | text | 'Hello World!' | 二维码内容 | | width / height | 200 | 尺寸 px | | correctLevel | 'M' | L / M / Q / H |

使用示例

<AsaiQRCodeCanvas :attr="{ text: licenseUrl, width: 200, height: 200 }" :opt="{}" />

const dataUrl = await QRCode.toDataURL('hello');

文件结构

asai-vue-qrcode/
├── src/index.ts
└── src/components/AsaiQRCode/
    ├── AsaiQRCode.vue
    ├── AsaiQRCodeCanvas.vue
    └── AsaiQRCodeImg.vue

纠错级别

| 级别 | 可恢复 | |------|--------| | L | ~7% | | M | ~15% | | Q | ~25% | | H | ~30% |