logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

QRCode
二维码

能够将文本转换生成二维码的组件,支持自定义配色和 Logo 配置。
使用import { QRCode } from "antd";
源码components/qr-code
文档
编辑此页更新日志
版本自 5.1.0 起支持

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

代码演示

基本使用

基本用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

二维码过期

已扫描

不同的状态

可以通过 status 的值控制二维码的状态,提供了 active、expired、loading、scanned 四个值。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义渲染类型

通过设置 type 自定义渲染结果,提供 canvas 和 svg 两个选项。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义颜色

通过设置 color 自定义二维码颜色,通过设置 bgColor 自定义背景颜色。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
纠错比例

通过设置 errorLevel 调整不同的容错等级。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
带 Icon 的例子

带 Icon 的二维码。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Loading...

二维码过期

已扫描
自定义状态渲染器

可以通过 statusRender 的值控制二维码不同状态的渲染逻辑。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.20.0
自定义尺寸

自定义尺寸

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
下载二维码

下载二维码的简单实现。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
高级用法

带气泡卡片的例子。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

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

参数说明类型默认值版本
value扫描后的文本string-
type渲染类型canvas | svg canvas5.6.0
icon二维码中图片的地址(目前只支持图片地址)string-
size二维码大小number160
iconSize二维码中图片的大小number | { width: number; height: number }405.19.0
color二维码颜色string#000
bgColor二维码背景颜色stringtransparent5.5.0
bordered是否有边框booleantrue
errorLevel二维码纠错等级'L' | 'M' | 'Q' | 'H' M
status二维码状态active | expired | loading | scannedactivescanned: 5.13.0
statusRender自定义状态渲染器(info: StatusRenderInfo) => React.ReactNode-5.20.0
onRefresh点击"点击刷新"的回调() => void-

StatusRenderInfo

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

主题变量(Design Token)

全局 Token如何定制?

FAQ

关于二维码纠错等级

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

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

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

⚠️⚠️⚠️ 二维码无法扫描?

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