QRCode 二维码

能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。

导入

import { QRCode } from "@reglow/reui";

何时使用

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

代码演示

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { QRCode } from '@reglow/reui'

const text = ref('https://ant.design/')
</script>

<template>
  <QRCode :value="text" />
</template>

带 Logo

<template>
  <QRCode
    error-level="H"
    value="https://ant.design/"
    icon="/logo.png"
    :icon-size="40"
  />
</template>

渲染类型

支持 canvas 和 svg 两种渲染方式。

<template>
  <QRCode type="canvas" value="https://ant.design/" />
  <QRCode type="svg" value="https://ant.design/" />
</template>

自定义尺寸

<template>
  <QRCode :size="200" value="https://ant.design/" />
</template>

自定义颜色

<template>
  <QRCode value="https://ant.design/" color="#1677ff" />
  <QRCode value="https://ant.design/" color="#52c41a" bg-color="#f6ffed" />
</template>

纠错等级

<template>
  <QRCode value="https://ant.design/" error-level="L" />
  <QRCode value="https://ant.design/" error-level="M" />
  <QRCode value="https://ant.design/" error-level="Q" />
  <QRCode value="https://ant.design/" error-level="H" />
</template>

不同状态

<script setup lang="ts">
import { QRCode } from '@reglow/reui'

const handleRefresh = () => {
  console.log('refresh')
}
</script>

<template>
  <QRCode value="https://ant.design" status="loading" />
  <QRCode value="https://ant.design" status="expired" @refresh="handleRefresh" />
  <QRCode value="https://ant.design" status="scanned" />
</template>

下载二维码

<script setup lang="ts">
import { ref } from 'vue'
import { QRCode } from '@reglow/reui'

const qrRef = ref()
</script>

<template>
  <QRCode ref="qrRef" value="https://ant.design/" />
  <button @click="qrRef?.download()">下载</button>
</template>

API

QRCode Props

参数	说明	类型	默认值
value	扫描后的文本	`string`	-
type	渲染类型	`'canvas' \| 'svg'`	`'canvas'`
size	二维码大小	`number`	`160`
icon	中间图片地址	`string`	-
iconSize	图片大小	`number \| { width: number; height: number }`	`size/4`
color	二维码颜色	`string`	`'#000000'`
bgColor	背景颜色	`string`	`'transparent'`
bordered	是否有边框	`boolean`	`true`
errorLevel	纠错等级	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`
marginSize	留白大小（模块数）	`number`	`0`
status	状态	`'active' \| 'expired' \| 'loading' \| 'scanned'`	`'active'`

QRCode Events

事件名	说明	回调参数
refresh	过期状态点击刷新	-

QRCode Slots

插槽名	说明	参数
status	自定义状态渲染	`{ status: string }`
loading	自定义加载状态	-
expired	自定义过期状态	-
scanned	自定义已扫描状态	-

QRCode Methods (通过 ref 调用)

方法名	说明
download()	下载二维码（PNG 或 SVG）

纠错等级说明

等级	可纠正错误率
L	约 7%
M	约 15%
Q	约 25%
H	约 30%

PricingTable 价格表

用于展示不同订阅方案/套餐的对比价格表，桌面端为表格布局、移动端自动切换为卡片列表，支持高亮推荐方案与自定义插槽。

Table 表格

基于 TanStack Table 的通用表格与分页表格，支持自动列、排序、行选择、展开行、搜索、分页、列管理与服务端排序

内容锚点

导入
何时使用
代码演示
API