[RFC] New Component: QrCode

[MadCcc]

Summary

新增 QrCode 组件，能够将链接转换生成二维码，支持自定义配色和 Logo 配置。

API

参数	说明	类型	默认值
value	扫描后的地址	string	-
icon	二维码中图片元素	ReactNode	-
size	二维码图片大小	number	128
iconSize	二维码中 logo 大小	number	32
bgColor/-	二维码背景颜色	string	#FFFFFF
fgColor/color	二维码前景的颜色	string	#000000
statusRender @internal	状态蒙层	(status, onRefresh) => ReactNode	-
status	二维码状态	'active' | 'expired' | 'loading'	'active'
onRefresh	点击"点击刷新"的回调	() => void	-
errorLevel	纠错码的等级	'L' | 'M' | 'Q' | 'H'	'L'

Basic Example

基本用法

import React from 'react';
import { QrCode } from 'antd';

export default () => <QrCode value="http://example.com" />;

有 LOGO

import React from 'react';
import { QrCode } from 'antd';

export default () => (
  <>
    <QrCode
      value="https://ant.design"
      logo="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
    />
  </>
);

Advanced Usage

Popover

Detailed Design

基础样式

最基本的二维码，为了与5.0整体风格一致，二维码会带有一个白色背景：
二维码尺寸：140 * 140px
白色背景：160 * 160px，radius=8px

自定义Logo

支持在二维码中心区域显示品牌Logo，Logo区白色背景：40*40px，radius=6px
这个可以考虑自行实现了，支持 ReactNode

二维码状态

二维码过期，支持点击刷新；刷新时会有短暂的loading动画。
没有 onRefresh 时不显示“点击刷新”。

代码重构

在旧代码基础上重构，分支：https://github.com/ant-design/ant-design/tree/feat/QrCode
需要做的迁移工作包括但不限于：

1. style 改用 genComponentStyleHook，减少 hashId 的使用，token 调整；
2. 工具方法替换，比如使用 useMergedState 受控等；
3. 默认文本国际化；
4. 文档改写，适配 dumi；
5. 测试补全

Drawbacks

暂无。

[li-jia-nan]

应该是 等级 吧？

[MadCcc]

是的，原文笔误，纠正了

[ignite-404]

会支持条码吗

[MadCcc]

条码暂不考虑哦

[li-jia-nan]

• feat: New Component QRCode #38948

[Veveue]

建议支持 添加二维码文字描述 中间或二维码下边

[li-jia-nan]

建议支持 添加二维码文字描述 中间或二维码下边

@zombieJ @MadCcc 也不是不可以，感觉可以先观望一下？看看用户反响