1# qrcode
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<qrcode>** component is used to generate and display a QR code.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Not supported
17
18
19## Attributes
20
21In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
22
23| Name   | Type    | Default Value | Mandatory  | Description                                      |
24| ----- | ------ | ---- | ---- | ---------------------------------------- |
25| value | string | -    | Yes   | Content used to generate the QR code.                             |
26| type  | string | rect | No   | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
27
28
29## Styles
30
31In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
32
33| Name              | Type           | Default Value     | Mandatory  | Description      |
34| ---------------- | ------------- | -------- | ---- | -------- |
35| color            | &lt;color&gt; | \#000000 | No   | Color of the QR code.  |
36| background-color | &lt;color&gt; | \#ffffff | No   | Background color of the QR code.|
37
38>  **NOTE**
39>  - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is centered.
40>
41>
42>  - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length 200 px is used.
43>
44
45
46## Events
47
48The [universal events](js-components-common-events.md) are supported.
49
50## Methods
51
52The [universal methods](js-components-common-methods.md) are supported.
53
54
55## Example
56
57```html
58<!-- xxx.hml -->
59<div class="container">
60  <qrcode value="{{qr_value}}" type="{{qr_type}}"
61  style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
62  <text class="txt">Type</text>
63  <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
64  <text class="txt">Color</text>
65  <select onchange="setcol">
66    <option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
67  </select>
68  <text class="txt">Background Color</text>
69  <select onchange="setbcol">
70    <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
71  </select>
72</div>
73```
74
75```css
76/* xxx.css */
77.container {
78  width: 100%;
79  height: 100%;
80  flex-direction: column;
81  justify-content: center;
82  align-items: center;
83}
84.txt {
85  margin: 30px;
86  color: orangered;
87}
88select{
89  margin-top: 40px;
90  margin-bottom: 40px;
91}
92```
93
94```js
95/* index.js */
96export default {
97  data: {
98    qr_type: 'rect',
99    qr_size: '300px',
100    qr_col: '#87ceeb',
101    col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
102    qr_bcol: '#f0ffff',
103    bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
104  },
105  settype(e) {
106    if (e.checked) {
107      this.qr_type = 'rect'
108    } else {
109      this.qr_type = 'circle'
110    }
111  },
112  setcol(e) {
113    this.qr_col = e.newValue
114  },
115  setbcol(e) {
116    this.qr_bcol = e.newValue
117  }
118}
119```
120
121![12](figures/12.gif)
122