组件 · 数据展示
QrCode 二维码
将文本/URL 渲染为二维码。
使用建议
- 避免：杜撰纠错级别枚举
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { QrCode } from '@selrux/ui/qr-code';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
value 为编码内容。
颜色、容错与形态
color / bgColor，errorLevel 容错等级，type 为 canvas / svg。
状态
status 为 loading / expired / scanned，expired 时可通过 onRefresh 刷新。
加载中
二维码已过期
已扫描
图标与留白
icon 在中心放置标识，iconSize 设定尺寸；marginSize 设定静区；bgColor 背景色。
自定义状态
statusRender 自定义过期 / 加载遮罩；statusLocale 覆盖内置文案。
登录码已过期
生成中…
API
属性覆盖：示例用到 13 / 13 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
QrCode
主题化二维码；按明暗域提供默认前景色。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | 扫描后文本；空字符串时不渲染。 | string | - |
bordered | 是否显示描边容器；默认 true。 | boolean | true |
type | 渲染类型；默认 canvas。 | "canvas" | "svg" | canvas |
size | 边长像素；非法回退 160。 | number | - |
color | 前景模块色；默认 #000。 | string | - |
bgColor | 背景色；默认 transparent。 | string | transparent |
errorLevel | 纠错等级；默认 M。 | "L" | "M" | "Q" | "H" | M |
icon | 中心图 URL。 | string | - |
iconSize | 中心图边长像素；非法回退 40。 | number | - |
marginSize | 安静区模块数；非法回退 0。 | number | - |
status | 业务状态；默认 active。 | "loading" | "active" | "expired" | "scanned" | active |
onRefresh | 过期刷新。 | (() => void) | - |
statusRender | 自定义状态遮罩；省略时由 UI 提供默认节点。 | ((info: QrCodeStatusRenderInfo) => ReactNode) | - |
statusLocale | 状态文案覆盖；省略时由组件按语言回退。 | Partial<QrCodeStatusLocale> | - |
另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：QrCodeErrorLevel、QrCodeProps、QrCodeStatus、QrCodeStatusLocale、QrCodeStatusRenderInfo、QrCodeType