mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 07:39:36 +08:00
240210a281
* feat: qrcode * chore: code clean * feat: New Component Qr-Code (#38891) * feat: QrCode * fix * fix * fix: fix bug * fix: fix bug * fix * fix * fix * delete * delete * test case * fix lint * bundlesize * demo * fix: fix test * remove dep * update snap * en docs * refactor: rename tests dir * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * rename * fix * adjust text * rename * fix title * rename * rename * fix: snap * fix * bundlesize * update demo * update docs * add demo * add docs * add docs * test: add warning * update demo * bundlesize * update test case * update demo * feat: add onRefresh、add status * fix: fix demo * fix: fix demo * add locale * add locale * add test case * update snap * fix demo * update demo * update demo * update demo * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/interface.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * fix * Update components/qrcode/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * fix * fix * fix * add decs * fix * fix * fix type * fix * fix demo * fix lint * fix lint * add test case for bordered * prettier-ignore Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: 栗嘉男 <lijianan@lijianandeMacBook-Pro.local>
2.6 KiB
2.6 KiB
| category | subtitle | title | cover | demo | group | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Components | 二维码 | QRCode | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original |
|
|
能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置，自 antd@5.1.0 版本开始提供该组件。
何时使用
当需要将链接转换成为二维码时使用。
代码演示
基本使用
带 Icon 的例子
不同的状态
自定义尺寸
自定义颜色
下载二维码
纠错比例
高级用法
API
自
antd@5.1.0版本开始提供该组件。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 扫描后的地址 | string | - |
| icon | 二维码中图片的地址（目前只支持图片地址） | string | - |
| size | 二维码大小 | number | 160 |
| iconSize | 二维码中图片的大小 | number | 40 |
| color | 二维码颜色 | string | #000 |
| bordered | 是否有边框 | boolean | true |
| errorLevel | 二维码纠错等级 | 'L' | 'M' | 'Q' | 'H' |
M |
| status | 二维码状态 | active | expired | loading |
active |
| onRefresh | 点击"点击刷新"的回调 | () => void |
- |
FAQ
关于二维码纠错等级
纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
有关更多信息，可参阅相关资料：https://www.qrcode.com/zh/about/error_correction