2020-07-28 10:03:53 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: QRCode 二维码
|
2020-07-29 16:20:21 +08:00
|
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
type: 0
|
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
|
menuName: QRCode 二维码
|
2020-07-29 16:20:21 +08:00
|
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
order: 61
|
|
|
|
|
|
---
|
2020-07-29 16:20:21 +08:00
|
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
|
|
```schema:height="300" scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
|
> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
|
|
## 配置背景色
|
|
|
|
|
|
|
|
|
|
|
|
```schema:height="300" scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"backgroundColor": "#108cee",
|
|
|
|
|
|
"foregroundColor": "#000",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 配置前景色
|
|
|
|
|
|
|
|
|
|
|
|
```schema:height="300" scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"backgroundColor": "#fff",
|
|
|
|
|
|
"foregroundColor": "#108cee",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 不同复杂度
|
|
|
|
|
|
|
|
|
|
|
|
```schema:height="300" scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "hbox",
|
|
|
|
|
|
"columns": [
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"level": "L",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"level": "M",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"level": "Q",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "qr-code",
|
|
|
|
|
|
"codeSize": 128,
|
|
|
|
|
|
"level": "H",
|
|
|
|
|
|
"value": "https://www.baidu.com"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
|
| --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
|
| type | `string` | `"qr-code"` | 指定为 QRCode 渲染器 |
|
|
|
|
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|
|
|
|
|
| qrcodeClassName | `string` | | 二维码 SVG 的类名 |
|
|
|
|
|
|
| codeSize | `number` | `128` | 二维码的宽高大小 |
|
|
|
|
|
|
| backgroundColor | `string` | `"#fff"` | 二维码背景色 |
|
|
|
|
|
|
| foregroundColor | `string` | `"#000"` | 二维码前景色 |
|
|
|
|
|
|
| level | `string` | `"L"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |
|
|
|
|
|
|
| value | [模板](../concepts/template) | `"https://www.baidu.com"` | 扫描二维码后显示的文本，如果要显示某个页面请输入完整 url（`"http://..."`或`"https://..."`开头），支持使用 [模板](./concepts/template) |
|
