> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/qr-code.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# QRCode 二维码

将文本和链接展示为二维码。

## 基本用法


二维码

下载

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/qr-code/basic.tsx"
import { QRCode } from '@ifhover/leaf-ui';

export function QRCodeBasic() {
  return <QRCode value="https://ifhover.github.io/leaf-ui/" downloadable />;
}
```

展开代码

## 更多用法


加载中

二维码

过期后刷新

二维码

刷新二维码

自定义颜色

二维码

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/qr-code/advanced.tsx"
import { Flex, QRCode, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function QRCodeStatus() {
  const [expired, setExpired] = useState(true);
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Space direction="vertical" align="stretch">
        <Text tone="muted">加载中</Text>
        <QRCode value="Leaf UI" size={140} status="loading" />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">过期后刷新</Text>
        <QRCode
          value="Leaf UI"
          size={140}
          status={expired ? 'expired' : 'active'}
          onRefresh={() => setExpired(false)}
        />
      </Space>
      <Space direction="vertical" align="stretch">
        <Text tone="muted">自定义颜色</Text>
        <QRCode value="Leaf UI" size={140} color="#2463eb" />
      </Space>
    </Flex>
  );
}
```

展开代码

## 使用说明

value 为编码内容；status 可显示加载或过期状态。onRefresh 处理刷新操作，downloadable 提供 SVG 下载。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { QRCodeProps } from '@ifhover/leaf-ui';
```

## QRCodeProps API

| 属性                | 类型                                   | 默认值                           | 说明      |
| ----------------- | ------------------------------------ | ----------------------------- | ------- |
| `value`           | `string`                             | 必填                            | 受控值     |
| `size`            | `number`                             | `160`                         | 尺寸或间距预设 |
| `color`           | `string`                             | `'var(--leaf-color-text)'`    | 颜色      |
| `backgroundColor` | `string`                             | `'var(--leaf-color-surface)'` | 背景颜色    |
| `level`           | `'L' \| 'M' \| 'Q' \| 'H'`           | `'M'`                         | 二维码纠错等级 |
| `logo`            | `string`                             | —                             | 中央标志地址  |
| `logoSize`        | `number`                             | `32`                          | 中央标志尺寸  |
| `status`          | `'active' \| 'loading' \| 'expired'` | `'active'`                    | 显示状态    |
| `onRefresh`       | `() => void`                         | —                             | 刷新过期二维码 |
| `downloadable`    | `boolean`                            | `false`                       | 显示下载操作  |
| `fileName`        | `string`                             | `'qrcode.svg'`                | 下载文件名   |