SwQrcodeGenerator
SwQrcodeGenerator 将文本编码为二维码并渲染到 <canvas>。任意 prop 变化时自动重绘，支持自定义颜色、容错级别和边距。提供 download() 与 toDataURL() 方法，兼容桌面浏览器下载和移动端长按保存两种场景。
基础用法
传入 value 即可生成二维码；修改 value 时自动重绘（响应式）。
基础用法
加载中...
自定义颜色
通过 foreground（前景/深色，默认 #000000ff）和 background（背景/浅色，默认 #ffffffff）自定义二维码颜色。颜色格式为 RRGGBBAA（含 Alpha）。
自定义颜色
加载中...
容错级别
通过 errorCorrectionLevel 设置容错能力：L（~7%）、M（~15%，默认）、Q（~25%）、H（~30%）。更高的容错级别二维码更密集，但能在部分遮挡（如叠加 logo）的情况下仍可识别。
容错级别
加载中...
margin + width 组合
加载中...
下载与导出
通过 ref 调用 download() 触发浏览器下载；移动端不支持 <a download> 时，download() 会 reject MOBILE_LONG_PRESS，此时应改用 toDataURL() 显示图片供用户长按保存。
下载与导出
加载中...
Props
| 名称 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | string | ✓ | — | 要编码的文本（任意响应式变化均触发重绘） |
width | number | 200 | 二维码像素宽度（正方形） | |
foreground | string | '#000000ff' | 前景色（RRGGBBAA） | |
background | string | '#ffffffff' | 背景色（RRGGBBAA） | |
errorCorrectionLevel | 'L' | 'M' | 'Q' | 'H' | 'M' | 容错级别 'L'|'M'|'Q'|'H' | |
margin | number | 4 | 四周空白格数 | |
downloadFilename | string | '' | download() 的文件名；留空则用 qrcode-{timestamp}.png |
Events
| 事件名 | 载荷类型 | 说明 |
|---|---|---|
ready | void | — |
error | payload: { message: string } | — |
Exposed Methods
| 方法 | 返回值 | 说明 |
|---|---|---|
download() | Promise<void> | 触发浏览器下载 PNG；移动端不支持 a 标签下载时 reject new Error('MOBILE_LONG_PRESS')，需调用方 catch 并降级 |
toDataURL() | string | null | 返回 data:image/png;base64,...，适合移动端 <img :src> 长按保存 |
注意事项
- 颜色格式：
foreground/background均为RRGGBBAA8 位十六进制，最后两位为 Alpha（ff= 完全不透明）。若使用 CSScolor-picker只能拿到 6 位，需手动补ff。 - 响应式重绘：
value、width、foreground、background、errorCorrectionLevel、margin任意变化均触发重绘，无需手动调用reset。 - 移动端下载兼容：微信内置浏览器、部分 Android WebView 等不支持
<a download>，download()会 rejectMOBILE_LONG_PRESS，应在 catch 中改用toDataURL()展示图片。