73 lines
3.6 KiB
JSON
73 lines
3.6 KiB
JSON
{
|
||
"slug": "qrcode",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "二维码：value 决定图形、size/color 控呈现，showText 决定是否在图下显示原文。",
|
||
"usage": [
|
||
"React 端不依赖二维码库：矩阵由 value 的字符哈希做伪随机播种生成，再用 useMemo 缓存（QRCode.jsx:6-8,26-30）。",
|
||
"三个定位角是手动画的：place(0,0)、place(0,n-7)、place(n-7,0)，并清空角外一圈留白（QRCode.jsx:11-20）。",
|
||
"渲染成 SVG：每个黑格一个 <rect>，格边长 size / 25（QRCode.jsx:25,35）。",
|
||
"color 直接作为 svg 的 fill（QRCode.jsx:34），showText 打开时在图下渲染 value 原文（QRCode.jsx:37）。",
|
||
"value 变化会自动重算矩阵，缓存键是 [value, size]（QRCode.jsx:30）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是视觉占位实现而不是可扫描编码器，不要用于真实扫码场景；需要可识别二维码请换用真正的编码方案。",
|
||
"size 同时决定 SVG 宽高与格边长，改 size 会重算 memo，不要在同一帧内频繁变更。",
|
||
"showText 会把 value 明文展示在图下方，包含敏感串时请关掉（QRCode.jsx:37）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "string",
|
||
"desc": "编码内容，决定生成的矩阵"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "number",
|
||
"desc": "SVG 边长（像素），默认 200"
|
||
},
|
||
{
|
||
"name": "color",
|
||
"type": "string",
|
||
"desc": "前景色，作为 svg 的 fill"
|
||
},
|
||
{
|
||
"name": "showText",
|
||
"type": "boolean",
|
||
"desc": "是否在图下显示 value 原文"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"生成的 SVG 没有 role=\"img\" 与 <title>，读屏不会播报这是二维码（QRCode.jsx:34）。",
|
||
"图下方文本区是唯一可读内容，且受 showText 控制；需要无障碍时建议同时提供 aria-label 描述用途。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/QRCode.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/QRCode.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"qrcode-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/QRCode.jsx:6 中可指到 value（string）——编码内容，决定生成的矩阵",
|
||
"frameworks/QRCode.jsx:24 中可指到 size（number）——SVG 边长（像素），默认 200",
|
||
"frameworks/QRCode.jsx:24 中可指到 color（string）——前景色，作为 svg 的 fill",
|
||
"frameworks/QRCode.jsx:24 中可指到 showText（boolean）——是否在图下显示 value 原文",
|
||
"props 解构清单见 frameworks/QRCode.jsx:24-24；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/QRCode.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：4 行中 4 行是 frameworks/QRCode.jsx 解构出的顶层 props（解构块 frameworks/QRCode.jsx:24-24）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|