二维码 QRCode - Mogu Design

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

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

何时使用

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

代码演示

基本使用

基本用法。

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => <QRCode value="https://ant.design/" />;

export default App;

二维码过期

不同的状态

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

TypeScript
JavaScript
import React from 'react';
import { QRCode, Space } from 'mogud';

const App: React.FC = () => (
  <Space wrap>
    <QRCode value="https://ant.design/" status="loading" />
    <QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} />
  </Space>
);

export default App;

自定义尺寸

TypeScript
JavaScript
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { QRCode, Button } from 'mogud';

const App: React.FC = () => {
  const [size, setSize] = useState<number>(160);

  const increase = () => {
    setSize((prevSize) => {
      const newSize = prevSize + 10;
      if (newSize > 300) {
        return 300;
      }
      return newSize;
    });
  };

  const decline = () => {
    setSize((prevSize) => {
      const newSize = prevSize - 10;
      if (newSize < 48) {
        return 48;
      }
      return newSize;
    });
  };

  return (
    <>
      <Button.Group style={{ marginBottom: 16 }}>
        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
          Smaller
        </Button>
        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
          Larger
        </Button>
      </Button.Group>
      <QRCode
        errorLevel="H"
        size={size}
        iconSize={size / 4}
        value="https://ant.design/"
        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
    </>
  );
};

export default App;

下载二维码

下载二维码的简单实现。

TypeScript
JavaScript
import { Button, QRCode } from 'mogud';
import React from 'react';

const downloadQRCode = () => {
  const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
  if (canvas) {
    const url = canvas.toDataURL();
    const a = document.createElement('a');
    a.download = 'QRCode.png';
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
};

const App: React.FC = () => (
  <div id="myqrcode">
    <QRCode value="https://ant.design/" style={{ marginBottom: 16 }} />
    <Button type="primary" onClick={downloadQRCode}>
      Download
    </Button>
  </div>
);

export default App;

高级用法

带气泡卡片的例子。

TypeScript
JavaScript
import React from 'react';
import { QRCode, Popover } from 'mogud';

const src = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';

const App: React.FC = () => (
  <Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode value={src} bordered={false} />}>
    <img width={100} height={100} src={src} alt="icon" />
  </Popover>
);

export default App;

带 Icon 的例子

带 Icon 的二维码。

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => (
  <QRCode
    errorLevel="H"
    value="https://ant.design/"
    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
  />
);

export default App;

自定义渲染类型

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

TypeScript
JavaScript
import { QRCode, Space } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <Space>
    <QRCode type="canvas" value="https://ant.design/" />
    <QRCode type="svg" value="https://ant.design/" />
  </Space>
);

export default App;

自定义颜色

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

TypeScript
JavaScript
import { QRCode, Space, theme } from 'mogud';
import React from 'react';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();
  return (
    <Space>
      <QRCode value="https://ant.design/" color={token.colorSuccessText} />
      <QRCode
        value="https://ant.design/"
        color={token.colorInfoText}
        bgColor={token.colorBgLayout}
      />
    </Space>
  );
};

export default App;

L

M

Q

H

纠错比例

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

TypeScript
JavaScript
import React, { useState } from 'react';
import type { QRCodeProps } from 'mogud';
import { Segmented, QRCode } from 'mogud';

const App: React.FC = () => {
  const [level, setLevel] = useState<string | number>('L');
  return (
    <>
      <QRCode
        style={{ marginBottom: 16 }}
        errorLevel={level as QRCodeProps['errorLevel']}
        value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
      <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />
    </>
  );
};

export default App;

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`	-

FAQ

关于二维码纠错等级

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

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

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

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

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

何时使用

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

代码演示

基本使用

基本用法。

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => <QRCode value="https://ant.design/" />;

export default App;

二维码过期

不同的状态

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

TypeScript
JavaScript
import React from 'react';
import { QRCode, Space } from 'mogud';

const App: React.FC = () => (
  <Space wrap>
    <QRCode value="https://ant.design/" status="loading" />
    <QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} />
  </Space>
);

export default App;

自定义尺寸

TypeScript
JavaScript
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { QRCode, Button } from 'mogud';

const App: React.FC = () => {
  const [size, setSize] = useState<number>(160);

  const increase = () => {
    setSize((prevSize) => {
      const newSize = prevSize + 10;
      if (newSize > 300) {
        return 300;
      }
      return newSize;
    });
  };

  const decline = () => {
    setSize((prevSize) => {
      const newSize = prevSize - 10;
      if (newSize < 48) {
        return 48;
      }
      return newSize;
    });
  };

  return (
    <>
      <Button.Group style={{ marginBottom: 16 }}>
        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
          Smaller
        </Button>
        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
          Larger
        </Button>
      </Button.Group>
      <QRCode
        errorLevel="H"
        size={size}
        iconSize={size / 4}
        value="https://ant.design/"
        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
    </>
  );
};

export default App;

下载二维码

下载二维码的简单实现。

TypeScript
JavaScript
import { Button, QRCode } from 'mogud';
import React from 'react';

const downloadQRCode = () => {
  const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
  if (canvas) {
    const url = canvas.toDataURL();
    const a = document.createElement('a');
    a.download = 'QRCode.png';
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
};

const App: React.FC = () => (
  <div id="myqrcode">
    <QRCode value="https://ant.design/" style={{ marginBottom: 16 }} />
    <Button type="primary" onClick={downloadQRCode}>
      Download
    </Button>
  </div>
);

export default App;

高级用法

带气泡卡片的例子。

TypeScript
JavaScript
import React from 'react';
import { QRCode, Popover } from 'mogud';

const src = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';

const App: React.FC = () => (
  <Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode value={src} bordered={false} />}>
    <img width={100} height={100} src={src} alt="icon" />
  </Popover>
);

export default App;

带 Icon 的例子

带 Icon 的二维码。

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => (
  <QRCode
    errorLevel="H"
    value="https://ant.design/"
    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
  />
);

export default App;

自定义渲染类型

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

TypeScript
JavaScript
import { QRCode, Space } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <Space>
    <QRCode type="canvas" value="https://ant.design/" />
    <QRCode type="svg" value="https://ant.design/" />
  </Space>
);

export default App;

自定义颜色

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

TypeScript
JavaScript
import { QRCode, Space, theme } from 'mogud';
import React from 'react';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();
  return (
    <Space>
      <QRCode value="https://ant.design/" color={token.colorSuccessText} />
      <QRCode
        value="https://ant.design/"
        color={token.colorInfoText}
        bgColor={token.colorBgLayout}
      />
    </Space>
  );
};

export default App;

L

M

Q

H

纠错比例

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

TypeScript
JavaScript
import React, { useState } from 'react';
import type { QRCodeProps } from 'mogud';
import { Segmented, QRCode } from 'mogud';

const App: React.FC = () => {
  const [level, setLevel] = useState<string | number>('L');
  return (
    <>
      <QRCode
        style={{ marginBottom: 16 }}
        errorLevel={level as QRCodeProps['errorLevel']}
        value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
      <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />
    </>
  );
};

export default App;

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`	-

FAQ

关于二维码纠错等级

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

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

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

Mogu Design

QRCode二维码

Mogu Design

QRCode二维码

何时使用

代码演示

API

FAQ

关于二维码纠错等级

何时使用

代码演示

API

FAQ

关于二维码纠错等级