# qrcode
生成并显示二维码。
> **说明：**
>从API Version 5 开始支持。
## 权限列表
无
## 子组件
不支持。
## 属性
除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
名称
|
类型
|
默认值
|
必填
|
描述
|
|---|
value
|
string
|
-
|
是
|
用来生成二维码的内容。
|
type
|
string
|
rect
|
否
|
二维码类型。可能选项有：
|
## 样式
除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
名称
|
类型
|
默认值
|
必填
|
描述
|
|---|
color
|
<color>
|
#000000
|
否
|
二维码颜色。
|
background-color
|
<color>
|
#ffffff
|
否
|
二维码背景颜色。
|
> **说明：**
>- width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
>- width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
## 事件
支持[通用事件](js-components-common-events.md)。
## 方法
支持[通用方法](js-components-common-methods.md)。
## 示例
```
Type
Color
Background Color
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.txt {
margin: 30px;
color: orangered;
}
select{
margin-top: 40px;
margin-bottom: 40px;
}
```
```
/* index.js */
export default {
data: {
qr_type: 'rect',
qr_size: '300px',
qr_col: '#87ceeb',
col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
qr_bcol: '#f0ffff',
bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
},
settype(e) {
if (e.checked) {
this.qr_type = 'rect'
} else {
this.qr_type = 'circle'
}
},
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) {
this.qr_col = e.newValue
},
setbcol(e) {
this.qr_bcol = e.newValue
}
}
```
