QRCode 二维码
基于纯 TypeScript 零依赖编码器(自研)的二维码组件,输出内联 SVG,可扫码、可下载。
基础用法
基础二维码
value 支持任意文本(数字/字母数字/字节模式自动选择),默认尺寸 128px。
尺寸
自定义尺寸
size 控制渲染宽高(最小 32,非法值回退 128);SVG 用 viewBox 缩放,任意尺寸均清晰。
纠错级别
error-correction
`error-correction` 接受 `l/m/q/h`,但当前自研编码器仅实现 **L 级**纠错,m/q/h 归一为 l 处理(可正常渲染,扫码不受影响)。更高纠错级别将随编码器迭代补全。
空态与超长
空 value
value 为空时显示「暂无内容」占位;内容超出 L 级纠错、版本 1–10 的容量(约 307 字节)时显示「内容过长」提示。
无障碍
aria-label
容器 `role="img"`;`aria-label` 属性优先,缺省走 locale 默认文案(中文「二维码」/ 英文「QR code」),可被屏幕阅读器读出。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
aria-label | 容器可访问名称,缺省走 i18n | — | — |
error-correction | 纠错级别 l/m/q/h(当前仅 L 级,其余归一为 l) | — | — |
size | 渲染宽高(px) | string | 128 |
value | 二维码内容文本 | string | — |
编码器选型(架构决策)
- 零依赖原则下评估纯 TS 编码器:完整 QR 标准(M/Q/H 纠错 + 掩码 + 全版本块表)实现过重,故选自研 L 级简化版;
- 支持版本 1–10、字节/字母数字/数字三种模式、8 种掩码罚分择优;
- 正确性经标准参考向量交叉验证(RS 纠错码 / 格式信息 / 版本信息)与矩阵回读自检,产物可被标准扫码器识别;
- 编码器函数(
encodeQR/matrixToPath等)由@oas-isui/ui导出,可用于 SSR 或自定义渲染。