QRCode 二维码

用于生成二维码的组件。

基础用法

最简单的二维码用法。

<template>
  <ExQRCode value="https://github.com/vuejs/vue" />
</template>

不同尺寸

通过 size 属性可以设置二维码的大小。

<template>
  <ExQRCode :value="url" :size="100" />
  <ExQRCode :value="url" :size="150" />
  <ExQRCode :value="url" :size="200" />
  <ExQRCode :value="url" :size="250" />
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://github.com/vuejs/vue')
</script>

不同类型

通过 type 属性可以设置不同的边框样式。

Default

Primary

Success

Warning

Danger

<template>
  <ExQRCode :value="url" type="primary" />
  <ExQRCode :value="url" type="success" />
  <ExQRCode :value="url" type="warning" />
  <ExQRCode :value="url" type="danger" />
</template>

自定义颜色

通过 fgColor 和 bgColor 属性可以自定义二维码的颜色。

霓虹蓝

霓虹粉

绿色

<template>
  <ExQRCode 
    :value="url" 
    fg-color="#00f0ff"
    bg-color="#0a0a0a"
  />
</template>

带中心图标

通过 icon 插槽可以在二维码中心添加图标或 Logo。

游戏房间

玩家资料

下载游戏

<template>
  <ExQRCode :value="gameUrl" type="primary" :icon-size="50">
    <template #icon>
      <img 
        src="https://api.iconify.design/ri/gamepad-line.svg" 
        alt="游戏" 
        style="width: 100%; height: 100%;" 
      />
    </template>
  </ExQRCode>
</template>

<script setup>
import { ref } from 'vue'
const gameUrl = ref('https://game.example.com/join?room=12345')
</script>

错误纠正级别

通过 level 属性可以设置错误纠正级别。级别越高，容错能力越强，但二维码越复杂。

L (7%)

M (15%)

Q (25%)

H (30%)

<template>
  <ExQRCode :value="url" level="L" />
  <ExQRCode :value="url" level="M" />
  <ExQRCode :value="url" level="Q" />
  <ExQRCode :value="url" level="H" />
</template>

无边框

设置 bordered 为 false 可以移除边框。

<template>
  <ExQRCode :value="url" :bordered="false" />
</template>

自定义圆角

通过 border-radius 属性可以自定义圆角大小。

<template>
  <ExQRCode :value="url" :border-radius="0" />
  <ExQRCode :value="url" :border-radius="16" />
  <ExQRCode :value="url" :border-radius="100" />
</template>

下载二维码

可以通过组件暴露的 download 方法下载二维码。

<template>
  <ExQRCode ref="qrcodeRef" :value="url" type="primary" />
  <ExButton type="primary" @click="handleDownload">
    下载二维码
  </ExButton>
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://github.com/vuejs/vue')
const qrcodeRef = ref()

const handleDownload = () => {
  qrcodeRef.value?.download('my-qrcode.png')
}
</script>

API

QRCode Props

属性	说明	类型	默认值
value	二维码内容	string	-
size	二维码大小	number	200
level	错误纠正级别	'L' | 'M' | 'Q' | 'H'	'M'
bg-color	背景颜色	string	'#ffffff'
fg-color	前景颜色	string	'#000000'
include-margin	是否包含边距	boolean	true
bordered	是否显示边框	boolean	true
border-radius	边框圆角	number	8
icon-size	中心图标大小	number	40
type	二维码类型	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'
error-text	错误提示文本	string	undefined
aria-label	无障碍标签	string	undefined

QRCode Slots

插槽名	说明
icon	中心图标/Logo

QRCode Methods

方法名	说明	类型
getElement	获取二维码DOM元素	() => HTMLDivElement | null
download	下载二维码	(filename?: string) => void
toDataURL	获取二维码数据URL	(type?: 'image/png' | 'image/jpeg') => string
refresh	刷新二维码	() => void

错误纠正级别说明

级别	容错率	说明
L	7%	低容错，适合内容简单的二维码
M	15%	中等容错，默认级别
Q	25%	较高容错，适合需要添加图标的二维码
H	30%	高容错，适合复杂环境或需要大图标

无障碍支持

• 使用 role="img" 标记
• 支持 aria-label 属性
• 提供错误状态提示

注意事项

1. 二维码内容越长，生成的二维码越复杂
2. 添加中心图标会降低扫描成功率，建议使用较高的错误纠正级别（Q 或 H）
3. 自定义颜色时，确保前景色和背景色有足够的对比度
4. 二维码大小建议不小于 100px，以确保扫描成功率