1# qrcode<a name="ZH-CN_TOPIC_0000001163812220"></a> 2 3生成并显示二维码。 4 5> **说明：** 6>从API Version 5 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001127284846_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001127284846_section352513155564"></a> 13 14不支持。 15 16## 属性<a name="zh-cn_topic_0000001127284846_section5347151165210"></a> 17 18除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 19 20<a name="zh-cn_topic_0000001127284846_table20633101642315"></a> 21<table><thead align="left"><tr id="zh-cn_topic_0000001127284846_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284846_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001127284846_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001127284846_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 22</th> 23<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284846_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001127284846_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001127284846_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 24</th> 25<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284846_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001127284846_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001127284846_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 26</th> 27<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284846_p824610360217"><a name="zh-cn_topic_0000001127284846_p824610360217"></a><a name="zh-cn_topic_0000001127284846_p824610360217"></a>必填</p> 28</th> 29<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284846_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001127284846_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001127284846_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 30</th> 31</tr> 32</thead> 33<tbody><tr id="zh-cn_topic_0000001127284846_row126185265127"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284846_p024862891210"><a name="zh-cn_topic_0000001127284846_p024862891210"></a><a name="zh-cn_topic_0000001127284846_p024862891210"></a>value</p> 34</td> 35<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284846_p12248142813120"><a name="zh-cn_topic_0000001127284846_p12248142813120"></a><a name="zh-cn_topic_0000001127284846_p12248142813120"></a>string</p> 36</td> 37<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284846_p124815283126"><a name="zh-cn_topic_0000001127284846_p124815283126"></a><a name="zh-cn_topic_0000001127284846_p124815283126"></a>-</p> 38</td> 39<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284846_p1248102811127"><a name="zh-cn_topic_0000001127284846_p1248102811127"></a><a name="zh-cn_topic_0000001127284846_p1248102811127"></a>是</p> 40</td> 41<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284846_p3248828131212"><a name="zh-cn_topic_0000001127284846_p3248828131212"></a><a name="zh-cn_topic_0000001127284846_p3248828131212"></a>用来生成二维码的内容。</p> 42</td> 43</tr> 44<tr id="zh-cn_topic_0000001127284846_row15957823161214"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284846_p1248142816121"><a name="zh-cn_topic_0000001127284846_p1248142816121"></a><a name="zh-cn_topic_0000001127284846_p1248142816121"></a>type</p> 45</td> 46<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284846_p4248528121210"><a name="zh-cn_topic_0000001127284846_p4248528121210"></a><a name="zh-cn_topic_0000001127284846_p4248528121210"></a>string</p> 47</td> 48<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284846_p924814288126"><a name="zh-cn_topic_0000001127284846_p924814288126"></a><a name="zh-cn_topic_0000001127284846_p924814288126"></a>rect</p> 49</td> 50<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284846_p162481828101210"><a name="zh-cn_topic_0000001127284846_p162481828101210"></a><a name="zh-cn_topic_0000001127284846_p162481828101210"></a>否</p> 51</td> 52<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284846_p2248182810126"><a name="zh-cn_topic_0000001127284846_p2248182810126"></a><a name="zh-cn_topic_0000001127284846_p2248182810126"></a>二维码类型。可能选项有：</p> 53<a name="zh-cn_topic_0000001127284846_ul19772143474918"></a><a name="zh-cn_topic_0000001127284846_ul19772143474918"></a><ul id="zh-cn_topic_0000001127284846_ul19772143474918"><li>rect：矩形二维码。</li><li>circle：圆形二维码。</li></ul> 54</td> 55</tr> 56</tbody> 57</table> 58 59## 样式<a name="zh-cn_topic_0000001127284846_section439317598552"></a> 60 61除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 62 63<a name="zh-cn_topic_0000001127284846_table417918285463"></a> 64<table><thead align="left"><tr id="zh-cn_topic_0000001127284846_row318012811464"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284846_p1918014281467"><a name="zh-cn_topic_0000001127284846_p1918014281467"></a><a name="zh-cn_topic_0000001127284846_p1918014281467"></a>名称</p> 65</th> 66<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284846_p14180172824614"><a name="zh-cn_topic_0000001127284846_p14180172824614"></a><a name="zh-cn_topic_0000001127284846_p14180172824614"></a>类型</p> 67</th> 68<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284846_p618052814461"><a name="zh-cn_topic_0000001127284846_p618052814461"></a><a name="zh-cn_topic_0000001127284846_p618052814461"></a>默认值</p> 69</th> 70<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284846_p518016281467"><a name="zh-cn_topic_0000001127284846_p518016281467"></a><a name="zh-cn_topic_0000001127284846_p518016281467"></a>必填</p> 71</th> 72<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284846_p10180152834613"><a name="zh-cn_topic_0000001127284846_p10180152834613"></a><a name="zh-cn_topic_0000001127284846_p10180152834613"></a>描述</p> 73</th> 74</tr> 75</thead> 76<tbody><tr id="zh-cn_topic_0000001127284846_row718014289468"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284846_p141800287465"><a name="zh-cn_topic_0000001127284846_p141800287465"></a><a name="zh-cn_topic_0000001127284846_p141800287465"></a>color</p> 77</td> 78<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284846_p20180182824617"><a name="zh-cn_topic_0000001127284846_p20180182824617"></a><a name="zh-cn_topic_0000001127284846_p20180182824617"></a><color></p> 79</td> 80<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284846_p14180162804617"><a name="zh-cn_topic_0000001127284846_p14180162804617"></a><a name="zh-cn_topic_0000001127284846_p14180162804617"></a>#000000</p> 81</td> 82<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284846_p17180028144615"><a name="zh-cn_topic_0000001127284846_p17180028144615"></a><a name="zh-cn_topic_0000001127284846_p17180028144615"></a>否</p> 83</td> 84<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284846_p31809283467"><a name="zh-cn_topic_0000001127284846_p31809283467"></a><a name="zh-cn_topic_0000001127284846_p31809283467"></a>二维码颜色。</p> 85</td> 86</tr> 87<tr id="zh-cn_topic_0000001127284846_row1918072894618"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284846_p1418012818468"><a name="zh-cn_topic_0000001127284846_p1418012818468"></a><a name="zh-cn_topic_0000001127284846_p1418012818468"></a>background-color</p> 88</td> 89<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284846_p181807285461"><a name="zh-cn_topic_0000001127284846_p181807285461"></a><a name="zh-cn_topic_0000001127284846_p181807285461"></a><color></p> 90</td> 91<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284846_p5180162818469"><a name="zh-cn_topic_0000001127284846_p5180162818469"></a><a name="zh-cn_topic_0000001127284846_p5180162818469"></a>#ffffff</p> 92</td> 93<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284846_p118022824620"><a name="zh-cn_topic_0000001127284846_p118022824620"></a><a name="zh-cn_topic_0000001127284846_p118022824620"></a>否</p> 94</td> 95<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284846_p11180182834614"><a name="zh-cn_topic_0000001127284846_p11180182834614"></a><a name="zh-cn_topic_0000001127284846_p11180182834614"></a>二维码背景颜色。</p> 96</td> 97</tr> 98</tbody> 99</table> 100 101> **说明：** 102>- width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 103>- width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 104 105## 事件<a name="zh-cn_topic_0000001127284846_section1948820711216"></a> 106 107支持[通用事件](js-components-common-events.md)。 108 109## 方法<a name="zh-cn_topic_0000001127284846_section2279124532420"></a> 110 111支持[通用方法](js-components-common-methods.md)。 112 113## 示例<a name="zh-cn_topic_0000001127284846_section81001951259"></a> 114 115``` 116<!-- xxx.hml --> 117<div class="container"> 118 <qrcode value="{{qr_value}}" type="{{qr_type}}" 119 style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode> 120 <text class="txt">Type</text> 121 <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch> 122 <text class="txt">Color</text> 123 <select onchange="setcol"> 124 <option for="{{col_list}}" value="{{$item}}">{{$item}}</option> 125 </select> 126 <text class="txt">Background Color</text> 127 <select onchange="setbcol"> 128 <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option> 129 </select> 130</div> 131``` 132 133``` 134/* xxx.css */ 135.container { 136 width: 100%; 137 height: 100%; 138 flex-direction: column; 139 justify-content: center; 140 align-items: center; 141} 142.txt { 143 margin: 30px; 144 color: orangered; 145} 146select{ 147 margin-top: 40px; 148 margin-bottom: 40px; 149} 150``` 151 152``` 153/* index.js */ 154export default { 155 data: { 156 qr_type: 'rect', 157 qr_size: '300px', 158 qr_col: '#87ceeb', 159 col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'], 160 qr_bcol: '#f0ffff', 161 bcol_list: ['#f0ffff','#ffffe0','#d8bfd8'] 162 }, 163 settype(e) { 164 if (e.checked) { 165 this.qr_type = 'rect' 166 } else { 167 this.qr_type = 'circle' 168 } 169 }, 170 setvalue(e) { 171 this.qr_value = e.newValue 172 }, 173 setcol(e) { 174 this.qr_col = e.newValue 175 }, 176 setbcol(e) { 177 this.qr_bcol = e.newValue 178 } 179} 180``` 181 182 183 184
