QRCode 二维码

生成具有可自定义外观、图标和状态的二维码。颜色自动适应明暗主题。

安装

此组件需要 qrcode 作为对等依赖:

npm install qrcode

导入

import { QRCode } from 'asterui/qrcode'

示例

基础二维码

具有默认设置的简单二维码。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode value="https://asterui.com" />
    )
}

export default App

自定义尺寸

不同的二维码尺寸。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 items-center flex-wrap">
        <QRCode value="https://asterui.com" size={80} />
        <QRCode value="https://asterui.com" size={120} />
        <QRCode value="https://asterui.com" size={160} />
        <QRCode value="https://asterui.com" size={200} />
      </div>
    )
}

export default App

自定义颜色

自定义前景色。背景默认适应主题。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <QRCode value="https://asterui.com" color="#3b82f6" />
        <QRCode value="https://asterui.com" color="#22c55e" />
        <QRCode value="https://asterui.com" color="#a855f7" />
      </div>
    )
}

export default App

带图标

带有居中徽标/图标的二维码。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode
        value="https://asterui.com"
        icon="/logo.png"
        iconSize={34}
        errorLevel="H"
      />
    )
}

export default App

纠错级别

不同的纠错级别会影响二维码密度。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="L" />
          <div className="text-sm mt-2">Level L (7%)</div>
        </div>
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="M" />
          <div className="text-sm mt-2">Level M (15%)</div>
        </div>
        <div className="text-center">
          <QRCode value="https://asterui.com/data" errorLevel="H" />
          <div className="text-sm mt-2">Level H (30%)</div>
        </div>
      </div>
    )
}

export default App

无边框

移除边框以实现无缝集成。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <QRCode value="https://asterui.com" bordered />
        <QRCode value="https://asterui.com" bordered={false} />
      </div>
    )
}

export default App

加载状态

在生成或获取二维码数据时显示加载状态。

</>

import { QRCode } from 'asterui'

function App() {
  return (
      <QRCode value="https://asterui.com" status="loading" />
    )
}

export default App

过期状态

显示过期状态及可选的刷新功能。

</>

import { QRCode } from 'asterui'
import { useState } from 'react'

function App() {
  const [status, setStatus] = useState<'active' | 'loading' | 'expired'>('expired');
  
  const handleRefresh = () => {
    setStatus('loading');
    setTimeout(() => setStatus('active'), 2000);
  };
  
  return (
      <QRCode
        value="https://asterui.com"
        status={status}
        onRefresh={handleRefresh}
      />
    )
}

export default App

动态二维码

动态更新二维码值。

</>

import { QRCode } from 'asterui'
import { useState } from 'react'

function App() {
  const [text, setText] = useState('https://asterui.com');
  
  return (
      <div className="flex flex-col gap-4 items-center">
        <QRCode value={text} />
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter text or URL"
          className="input input-bordered w-full max-w-md"
        />
      </div>
    )
}

export default App

API

QRCode

属性	描述	类型	默认值
value	要编码在二维码中的值	string	-
size	二维码画布大小(像素)	number	160
errorLevel	纠错级别	'L' | 'M' | 'Q' | 'H'	'M'
icon	要在中心显示的图标/徽标的 URL	string	-
iconSize	中心图标的大小(像素)	number	40
type	渲染类型	'canvas' | 'svg'	'canvas'
color	前景色(二维码颜色)	string	主题感知
bgColor	背景颜色	string	主题感知
bordered	在二维码周围显示边框	boolean	true
status	二维码状态	'active' | 'loading' | 'expired'	'active'
onRefresh	点击刷新按钮时的回调(过期状态)	() => void	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 二维码包含带有描述性标签的 role="img"
• 加载和过期状态会向屏幕阅读器宣布
• 刷新按钮可通过键盘访问