examples.md•7.76 kB
## QrCode 组件示例
### 基本使用
基本用法。
```tsx
import React from 'react';
import { Input, QRCode, Space } from 'antd';
const App: React.FC = () => {
const [text, setText] = React.useState('https://ant.design/');
return (
<Space direction="vertical" align="center">
<QRCode value={text || '-'} />
<Input
placeholder="-"
maxLength={60}
value={text}
onChange={(e) => setText(e.target.value)}
/>
</Space>
);
};
export default App;
```
### 带 Icon 的例子
带 Icon 的二维码。
```tsx
import React from 'react';
import { QRCode } from 'antd';
const App: React.FC = () => (
<QRCode
errorLevel="H"
value="https://ant.design/"
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
);
export default App;
```
### 不同的状态
可以通过 `status` 的值控制二维码的状态，提供了 `active`、`expired`、`loading`、`scanned` 四个值。
```tsx
import React from 'react';
import { Flex, QRCode } from 'antd';
const value = 'https://ant.design';
const App: React.FC = () => (
<Flex gap="middle" wrap>
<QRCode value={value} status="loading" />
<QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} />
<QRCode value={value} status="scanned" />
</Flex>
);
export default App;
```
### 自定义状态渲染器
可以通过 `statusRender` 的值控制二维码不同状态的渲染逻辑。
```tsx
import React from 'react';
import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons';
import type { QRCodeProps } from 'antd';
import { Button, Flex, QRCode, Space, Spin } from 'antd';
const value = 'https://ant.design';
const customStatusRender: QRCodeProps['statusRender'] = (info) => {
switch (info.status) {
case 'expired':
return (
<div>
<CloseCircleFilled style={{ color: 'red' }} /> {info.locale?.expired}
<p>
<Button type="link" onClick={info.onRefresh}>
<ReloadOutlined /> {info.locale?.refresh}
</Button>
</p>
</div>
);
case 'loading':
return (
<Space direction="vertical">
<Spin />
<p>Loading...</p>
</Space>
);
case 'scanned':
return (
<div>
<CheckCircleFilled style={{ color: 'green' }} /> {info.locale?.scanned}
</div>
);
default:
return null;
}
};
const App: React.FC = () => (
<Flex gap="middle" wrap>
<QRCode value={value} status="loading" statusRender={customStatusRender} />
<QRCode
value={value}
status="expired"
onRefresh={() => console.log('refresh')}
statusRender={customStatusRender}
/>
<QRCode value={value} status="scanned" statusRender={customStatusRender} />
</Flex>
);
export default App;
```
### 自定义渲染类型
通过设置 `type` 自定义渲染结果，提供 `canvas` 和 `svg` 两个选项。
```tsx
import React from 'react';
import { QRCode, Space } from 'antd';
const App: React.FC = () => (
<Space>
<QRCode type="canvas" value="https://ant.design/" />
<QRCode type="svg" value="https://ant.design/" />
</Space>
);
export default App;
```
### 自定义尺寸
自定义尺寸
```tsx
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, QRCode, Space } from 'antd';
const MIN_SIZE = 48;
const MAX_SIZE = 300;
const App: React.FC = () => {
const [size, setSize] = useState<number>(160);
const increase = () => {
setSize((prevSize) => {
const newSize = prevSize + 10;
if (newSize >= MAX_SIZE) {
return MAX_SIZE;
}
return newSize;
});
};
const decline = () => {
setSize((prevSize) => {
const newSize = prevSize - 10;
if (newSize <= MIN_SIZE) {
return MIN_SIZE;
}
return newSize;
});
};
return (
<>
<Space.Compact style={{ marginBottom: 16 }}>
<Button onClick={decline} disabled={size <= MIN_SIZE} icon={<MinusOutlined />}>
Smaller
</Button>
<Button onClick={increase} disabled={size >= MAX_SIZE} icon={<PlusOutlined />}>
Larger
</Button>
</Space.Compact>
<QRCode
errorLevel="H"
size={size}
iconSize={size / 4}
value="https://ant.design/"
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
</>
);
};
export default App;
```
### 自定义颜色
通过设置 `color` 自定义二维码颜色，通过设置 `bgColor` 自定义背景颜色。
```tsx
import React from 'react';
import { QRCode, Space, theme } from 'antd';
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;
```
### 下载二维码
下载二维码的简单实现。
```tsx
import React from 'react';
import { Button, QRCode, Segmented, Space } from 'antd';
import type { QRCodeProps } from 'antd';
function doDownload(url: string, fileName: string) {
const a = document.createElement('a');
a.download = fileName;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
const downloadCanvasQRCode = () => {
const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
if (canvas) {
const url = canvas.toDataURL();
doDownload(url, 'QRCode.png');
}
};
const downloadSvgQRCode = () => {
const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');
const svgData = new XMLSerializer().serializeToString(svg!);
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
doDownload(url, 'QRCode.svg');
};
const App: React.FC = () => {
const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
return (
<Space id="myqrcode" direction="vertical">
<Segmented options={['canvas', 'svg']} value={renderType} onChange={setRenderType} />
<div>
<QRCode
type={renderType}
value="https://ant.design/"
bgColor="#fff"
style={{ marginBottom: 16 }}
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
<Button
type="primary"
onClick={renderType === 'canvas' ? downloadCanvasQRCode : downloadSvgQRCode}
>
Download
</Button>
</div>
</Space>
);
};
export default App;
```
### 纠错比例
通过设置 errorLevel 调整不同的容错等级。
```tsx
import React, { useState } from 'react';
import type { QRCodeProps } from 'antd';
import { QRCode, Segmented } from 'antd';
const App: React.FC = () => {
const [level, setLevel] = useState<QRCodeProps['errorLevel']>('L');
return (
<>
<QRCode
style={{ marginBottom: 16 }}
errorLevel={level}
value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
<Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />
</>
);
};
export default App;
```
### 高级用法
带气泡卡片的例子。
```tsx
import React from 'react';
import { Button, Popover, QRCode } from 'antd';
const App: React.FC = () => (
<Popover content={<QRCode value="https://ant.design" bordered={false} />}>
<Button type="primary">Hover me</Button>
</Popover>
);
export default App;
```