仅桌面端保证样式
QRCode 二维码
纯 JS 编码(byte 模式 / M 级纠错 / 版本 1-10 自动选择,最长 214 字节,中文按 UTF-8 计),Canvas 高清渲染(devicePixelRatio 适配),无外部依赖、离线可用。
基础用法
换主色/暗色模式下前景背景色可用令牌覆盖
自定义颜色与静区
margin 收窄四周静区;第二个示例深底反白,前景与背景需保持足够对比度,否则影响扫码识别:
输出尺寸
size 为画布输出尺寸(px),码点模块自动缩放并对齐像素边界,缩放不失真:
导出 PNG
通过 ref 调用 toDataURL() 拿到 PNG dataURL,可直接触发下载或回显:
QRCode API
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | — | 编码内容(超长时 console.error 并保持上次内容) |
| size | Number | 120 | 输出尺寸(px) |
| margin | Number | 4 | 静区(四周留白,模块数) |
| foreground | String | #000000 | 前景色 |
| background | String | #ffffff | 背景色 |
暴露方法:toDataURL() 导出 PNG。底层编码器可独立引入:
js
import { encodeQR } from '@wil-works/evoke-business-ui/dist/index.mjs'
// encodeQR(text, { maskId? }) → { matrix, version, size, maskId }