HarmonyOS应用开发-qrcode二维码生成 - HarmonyOS技术社区 - 电子技术论坛

2022-05-12 15:13:23

HarmonyOS

一.创建项目
二.示例代码
Hml代码：

&lt;div class=&quot;container&quot;&gt;
&lt;text class=&quot;txt&quot;&gt;Type&lt;/text&gt;
&lt;switch showtext=&quot;true&quot; checked=&quot;true&quot; texton=&quot;rect&quot; textoff=&quot;circle&quot; onchange=&quot;setType&quot;&gt;&lt;/switch&gt;
&lt;qrcode value=&quot;{{qr_value}}&quot; type=&quot;{{qr_type}}&quot;
style=&quot;color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;&quot;&gt;
&lt;/qrcode&gt;
&lt;text class=&quot;txt&quot;&gt;Color&lt;/text&gt;
&lt;select onchange=&quot;setColor&quot;&gt;
&lt;option for=&quot;{{col_list}}&quot; value=&quot;{{$item}}&quot;&gt;{{$item}}&lt;/option&gt;
&lt;/select&gt;
&lt;text class=&quot;txt&quot;&gt;Background Color&lt;/text&gt;
&lt;select onchange=&quot;setColorB&quot;&gt;
&lt;option for=&quot;{{bcol_list}}&quot; value=&quot;{{$item}}&quot;&gt;{{$item}}&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

复制代码

Css代码：

复制代码

Js代码：

export default {
data: {
qr_value:&quot;这里是扫出的二维码内容&quot;,
qr_type: &#039;rect&#039;,
qr_size: &#039;200px&#039;,
qr_col: &#039;#333&#039;,
col_list: [&#039;#87ceeb&#039;,&#039;#fa8072&#039;,&#039;#da70d6&#039;,&#039;#80ff00ff&#039;,&#039;#00ff00ff&#039;],
qr_bcol: &#039;#f0ffff&#039;,
bcol_list: [&#039;#f0ffff&#039;,&#039;#ffffef&#039;,&#039;#d8bfd8&#039;]
},
setType(e) {
if (e.checked) {
this.qr_type = &#039;rect&#039;
} else {
this.qr_type = &#039;circle&#039;
}
},
setColor(e) {
this.qr_col = e.newValue
},
setColorB(e) {
this.qr_bcol = e.newValue
}
}

复制代码

三. 实例效果

附件：

(205.56 KB, 下载次数: 1)

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]HarmonyOS应用开发-qrcode二维码生成