Skip to content

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)string128
value二维码内容文本string

编码器选型(架构决策)

  • 零依赖原则下评估纯 TS 编码器:完整 QR 标准(M/Q/H 纠错 + 掩码 + 全版本块表)实现过重,故选自研 L 级简化版
  • 支持版本 1–10、字节/字母数字/数字三种模式、8 种掩码罚分择优;
  • 正确性经标准参考向量交叉验证(RS 纠错码 / 格式信息 / 版本信息)与矩阵回读自检,产物可被标准扫码器识别;
  • 编码器函数(encodeQR / matrixToPath 等)由 @oas-isui/ui 导出,可用于 SSR 或自定义渲染。