• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# qrcode
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @xuqinfeng1-->
5<!--Designer: @liyujie43-->
6<!--Tester: @xiong0104-->
7<!--Adviser: @xuqinfeng1-->
8
9>  **说明：**
10>  从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
11
12生成并显示二维码。
13
14## 权限列表
15
16无
17
18
19## 子组件
20
21不支持。
22
23
24## 属性
25
26除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
27
28| 名称    | 类型     | 默认值  | 必填   | 描述                                       |
29| ----- | ------ | ---- | ---- | ---------------------------------------- |
30| value | string | -    | 是    | 用来生成二维码的内容。                              |
31| type  | string | rect | 否    | 二维码类型。可能选项有：<br/>-&nbsp;rect：矩形二维码。<br/>-&nbsp;circle：圆形二维码。 |
32
33
34## 样式
35
36除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
37
38| 名称               | 类型            | 默认值      | 必填   | 描述       |
39| ---------------- | ------------- | -------- | ---- | -------- |
40| color            | &lt;color&gt; | \#000000 | 否    | 二维码颜色。   |
41| background-color | &lt;color&gt; | \#ffffff | 否    | 二维码背景颜色。 |
42
43>  **说明：**
44>  - width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
45>
46>
47>  - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
48>
49<!--RP1--><!--RP1End-->
50
51## 事件
52
53支持[通用事件](js-components-common-events.md)。
54
55## 方法
56
57支持[通用方法](js-components-common-methods.md)。
58
59
60## 示例
61
62```html
63<!-- xxx.hml -->
64<div class="container">
65  <qrcode value="{{qr_value}}" type="{{qr_type}}"
66  style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
67  <text class="txt">Type</text>
68  <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="setType"></switch>
69  <text class="txt">Color</text>
70  <select onchange="setCol">
71    <option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
72  </select>
73  <text class="txt">Background Color</text>
74  <select onchange="setBCol">
75    <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
76  </select>
77</div>
78```
79
80```css
81/* xxx.css */
82.container {
83  width: 100%;
84  height: 100%;
85  flex-direction: column;
86  justify-content: center;
87  align-items: center;
88}
89.txt {
90  margin: 30px;
91  color: orangered;
92}
93select{
94  margin-top: 40px;
95  margin-bottom: 40px;
96}
97```
98
99```js
100/* index.js */
101export default {
102  data: {
103    qr_type: 'rect',
104    qr_size: '300px',
105    qr_col: '#87ceeb',
106    col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
107    qr_bcol: '#f0ffff',
108    bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
109  },
110  setType(e) {
111    if (e.checked) {
112      this.qr_type = 'rect'
113    } else {
114      this.qr_type = 'circle'
115    }
116  },
117  setCol(e) {
118    this.qr_col = e.newValue
119  },
120  setBCol(e) {
121    this.qr_bcol = e.newValue
122  }
123}
124```
125
126![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif)
127
128