1# qrcode 2 3 4The **\<qrcode>** component is used to generate and display a QR code. 5 6> **NOTE** 7> 8> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. 9 10 11## Child Components 12 13Not supported 14 15 16## Attributes 17 18| Name| Type| Default Value| Mandatory| Description| 19| -------- | -------- | -------- | -------- | -------- | 20| value | string | - | Yes| Content used to generate the QR code. The maximum length is 256.| 21| id | string | - | No| Unique ID of the component.| 22| style | string | - | No| Style declaration of the component.| 23| class | string | - | No| Style class of the component, which is used to refer to a style table.| 24| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 25 26 27## Events 28 29| Name| Parameter| Description| 30| -------- | -------- | -------- | 31| click | - | Triggered when the component is clicked.| 32| longpress | - | Triggered when the component is long pressed.| 33| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 34 35 36## Styles 37 38| Name| Type| Default Value| Mandatory| Description| 39| -------- | -------- | -------- | -------- | -------- | 40| color | <color> | \#000000 | No| Color of the QR code.| 41| background-color | <color> | \#ffffff | No| Background color of the QR code.| 42| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.| 43| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.| 44| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 45| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 46| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 47| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 48| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 49| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 50| border-radius | <length> | - | No| Radius of round-corner borders.| 51| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 52| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 53 54> **NOTE** 55> - 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 center displayed. 56> 57>- The minimum values of **width** and **height** are 200 px. 58 59 60## Example 61 62 63```html 64<!-- xxx.hml --> 65<div class="container"> 66 <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_col}};background-color: {{qr_bcol}};"></qrcode> 67 <input type="button" onclick="changeColor" class="button">Color</input> 68 <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input> 69 <input type="button" onclick="changeValue" class="button">Value</input> 70</div> 71``` 72 73```css 74/* xxx.css */ 75.container { 76 width: 100%; 77 height: 100%; 78 flex-direction: column; 79 justify-content: center; 80 align-items: center; 81} 82.qrCode { 83 width: 200px; 84 height: 200px; 85} 86.button { 87 width: 30%; 88 height: 10%; 89 margin-top: 5%; 90} 91``` 92 93```javascript 94// xxx.js 95export default { 96 data: { 97 qr_col: '#87ceeb', 98 qr_bcol: '#f0ffff', 99 qr_value: 'value' 100 }, 101 changeColor() { 102 if (this.qr_col == '#87ceeb') { 103 this.qr_col = '#fa8072'; 104 } else { 105 this.qr_col = '#87ceeb'; 106 } 107 }, 108 changeBackgroundColor() { 109 if (this.qr_bcol == '#f0ffff') { 110 this.qr_bcol = '#ffffe0'; 111 } else { 112 this.qr_bcol = '#f0ffff'; 113 } 114 }, 115 changeValue() { 116 if (this.qr_value == 'value') { 117 this.qr_value = 'change'; 118 } else { 119 this.qr_value = 'value'; 120 } 121 } 122} 123``` 124 125 126
