QRCode - Ant Design — ContextQMD

何时使用 {#when-to-use}

当需要将文本转换成为二维码时使用。

代码演示 {#examples}

<code src="./demo/base.tsx">基本使用</code> <code src="./demo/icon.tsx">带 Icon 的例子</code> <code src="./demo/status.tsx">不同的状态</code> <code src="./demo/customStatusRender.tsx" version="5.20.0">自定义状态渲染器</code> <code src="./demo/type.tsx">自定义渲染类型</code> <code src="./demo/customSize.tsx">自定义尺寸</code> <code src="./demo/customColor.tsx">自定义颜色</code> <code src="./demo/download.tsx">下载二维码</code> <code src="./demo/errorlevel.tsx">纠错比例</code> <code src="./demo/Popover.tsx">高级用法</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>

API

通用属性参考：通用属性

自 [email protected] 版本开始提供该组件。

参数	说明	类型	默认值	版本
value	扫描后的文本	`string \| string[]`	-	`string[]`: 5.28.0
type	渲染类型	`canvas \| svg`	`canvas`	5.6.0
icon	二维码中图片的地址（目前只支持图片地址）	string	-
size	二维码大小	number	160
iconSize	二维码中图片的大小	number \| { width: number; height: number }	40	5.19.0
color	二维码颜色	string	`#000`
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
bgColor	二维码背景颜色	string	`transparent`	5.5.0
marginSize	留白（安静区）大小（单位为模块数），`0` 表示无留白	number	`0`	6.2.0
bordered	是否有边框	boolean	`true`
errorLevel	二维码纠错等级	`'L' \| 'M' \| 'Q' \| 'H'`	`M`
boostLevel	如果启用，自动提升纠错等级，结果的纠错级别可能会高于指定的纠错级别	`boolean`	true	5.28.0
status	二维码状态	`active \| expired \| loading \| scanned`	`active`	scanned: 5.13.0
statusRender	自定义状态渲染器	(info: StatusRenderInfo) => React.ReactNode	-	5.20.0
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
type	渲染类型	`canvas \| svg`	`canvas`	5.6.0
value	扫描后的文本	string	-

StatusRenderInfo

typescript

type StatusRenderInfo = {
  status: QRStatus;
  locale: Locale['QRCode'];
  onRefresh?: () => void;
};

Semantic DOM

主题变量（Design Token）{#design-token}

FAQ

关于二维码纠错等级 {#faq-error-correction-level}

纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。

通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。

有关更多信息，可参阅相关资料：https://www.qrcode.com/zh/about/error_correction

⚠️⚠️⚠️ 二维码无法扫描？ {#faq-cannot-scan}

若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。