sard-uniapp/components/qrcode/README.md

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

---
title: Qrcode
subtitle: 二维码
group: 数据展示
version: 1.4+
---

## 介绍

将一段文字或链接编码成图形，以便光学扫描仪或手机摄像头快速读取。

## 引入

```js
import Qrcode from 'sard-uniapp/components/qrcode/qrcode.vue'
```

## 代码演示

### 基础使用

设置 `text` 属性即可渲染一个二维码图片。其内部通过 `canvas` 来绘制二维码，但最终的呈现是以图片的形式，因此可以覆盖任何东西在二维码上面。

<<< @demo/qrcode/demo/Basic.vue

### 呈现的大小

使用 `size` 属性设置二维码呈现的大小，可以设置为任意尺寸单位。

<<< @demo/qrcode/demo/DisplaySize.vue

### 自定义颜色

通过设置 `color` 自定义二维码暗模块颜色，
通过设置 `bg-color` 自定义二维码亮模块颜色，即背景颜色。

<<< @demo/qrcode/demo/Color.vue

### 默认插槽

使用默认插槽, 可以把任意内容放置在二维码上面。

<<< @demo/qrcode/demo/Icon.vue

### 添加图标 <sup>1.19.2+</sup>

使用 `icon` 属性, 可以将一张图片渲染到画布中间，与二维码合并为同一张图片。

<<< @demo/qrcode/demo/IconProps.vue

### 安静区域模块数

可以简单把设置 `quiet-zone-modules` 当成设置二维码内边距。

<<< @demo/qrcode/demo/QuietZoneModules.vue

### 错误纠错级别

错误纠错级别越高，二维码抗磨损、抗脏能力越强，同时二维码就越大，可容纳的字符容量越小。

`ecl` 属性用于设置错误纠错级别。

<<< @demo/qrcode/demo/ECL.vue

下面是不同纠错级别的纠错能力表。

| 错误纠错级别 | 错误纠错能力   |
| ------------ | -------------- |
| L            | 恢复 7%的数据  |
| M            | 恢复 15%的数据 |
| Q            | 恢复 25%的数据 |
| H            | 恢复 30%的数据 |

## API

### QrcodeProps

| 属性                                      | 描述                         | 类型                     | 默认值 |
| ----------------------------------------- | ---------------------------- | ------------------------ | ------ |
| root-class                                | 组件根元素类名               | string                   | -      |
| root-style                                | 组件根元素样式               | StyleValue               | -      |
| text                                      | 要编码的字符串数据           | string                   | -      |
| ecl                                       | 错误纠错级别                 | 'L' \| 'M' \| 'Q' \| 'H' | 'M'    |
| size                                      | 二维码呈现的大小             | string                   | 320rpx |
| color                                     | 二维码颜色                   | string                   | #000   |
| bg-color                                  | 二维码背景颜色               | string                   | #fff   |
| quiet-zone-modules                        | 安静区域模块数               | number                   | 2      |
| show-menu-by-longpress <sup>1.19.2+</sup> | 长按图片显示菜单(微信小程序) | boolean                  | false  |
| icon <sup>1.19.2+</sup>                   | 二维码中图片的地址           | string                   | -      |

### QrcodeSlots

| 插槽    | 描述           | 属性 |
| ------- | -------------- | ---- |
| default | 自定义额外内容 | -    |

### QrcodeEmits

| 事件                       | 描述                                             | 类型                             |
| -------------------------- | ------------------------------------------------ | -------------------------------- |
| success <sup>1.25.1+</sup> | 二维码图片绘制成功后触发，可用于获取临时文件路径 | `(tempFilePath: string) => void` |