ant-design/components/qrcode/index.zh-CN.md
sy296565890 b534c1ecb4
feat: qrcode support render svg (#42570)
* fet: QRCode support type(renderAs)

* fet: QRCode support type(renderAs)

* fet: QRCode support type(renderAs)

* fet: QRCode support type(renderAs)

* fix: Improve type.md,  export QRProps

* Update components/qrcode/demo/type.md

Co-authored-by: lijianan <574980606@qq.com>

* Update components/qrcode/index.tsx

Co-authored-by: lijianan <574980606@qq.com>

* fix: qrCodeProps

* fix: qrcode snap

* Update components/qrcode/demo/type.md

Co-authored-by: lijianan <574980606@qq.com>

* fix: QRCode docs

* fix: QRCode demo

* Update components/qrcode/demo/download.tsx

Co-authored-by: lijianan <574980606@qq.com>

* Update components/qrcode/demo/download.tsx

Co-authored-by: lijianan <574980606@qq.com>

* fix: QRCode snap

* fix: QRCode snap

* fix: 恢复下载示例

---------

Co-authored-by: lijianan <574980606@qq.com>
2023-05-25 13:32:48 +08:00

3.0 KiB

category subtitle title cover coverDark demo group
Components 二维码 QRCode https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
cols
2
title order
数据展示 5

能够将文本转换生成二维码的组件,支持自定义配色和 Logo 配置,自 antd@5.1.0 版本开始提供该组件。

何时使用

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

代码演示

基本使用 带 Icon 的例子 不同的状态 自定义渲染类型 自定义尺寸 自定义颜色 下载二维码 纠错比例 高级用法

API

antd@5.1.0 版本开始提供该组件。

参数 说明 类型 默认值 版本
value 扫描后的文本 string -
type 渲染类型 canvas | svg canvas 5.6.0
icon 二维码中图片的地址(目前只支持图片地址) string -
size 二维码大小 number 160
iconSize 二维码中图片的大小 number 40
color 二维码颜色 string #000
bgColor 二维码背景颜色 string transparent 5.5.0
bordered 是否有边框 boolean true
errorLevel 二维码纠错等级 'L' | 'M' | 'Q' | 'H' M
status 二维码状态 active | expired | loading active
onRefresh 点击"点击刷新"的回调 () => void -

Design Token

FAQ

关于二维码纠错等级

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

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

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