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