#QRCode 二维码
将文本和链接展示为二维码。
#基本用法
basic.tsx
import { QRCode } from '@ifhover/leaf-ui';
export function QRCodeBasic() {
return <QRCode value="https://ifhover.github.io/leaf-ui/" downloadable />;
}
#更多用法
加载中
过期后刷新
自定义颜色
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 时,可以导入这些类型。
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' | 下载文件名 |