logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • 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二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
基本使用
带 Icon 的例子
不同的状态
自定义渲染类型
自定义尺寸
自定义颜色
下载二维码
纠错比例
高级用法
API
Design Token
FAQ
关于二维码纠错等级

QRCode
二维码

    • Popover气泡卡片Segmented分段控制器

    相关资源

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

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

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

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

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

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

    何时使用

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

    代码演示

    基本使用

    基本用法。

    expand codeexpand code

    二维码过期

    不同的状态

    可以通过 status 的值控制二维码的状态。

    expand codeexpand code
    自定义尺寸

    自定义尺寸

    expand codeexpand code
    下载二维码

    下载二维码的简单实现。

    expand codeexpand code
    icon
    高级用法

    带气泡卡片的例子。

    expand codeexpand code
    带 Icon 的例子

    带 Icon 的二维码。

    expand codeexpand code
    自定义渲染类型

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

    expand codeexpand code
    自定义颜色

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

    expand codeexpand code
    纠错比例

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

    expand codeexpand code

    API

    通用属性参考：通用属性

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

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

    Design Token

    全局 Token

    FAQ

    关于二维码纠错等级

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

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

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