安装
npm install vue-qr --save
导入
// vue2.0
import VueQr from 'vue-qr'
...
{
components: {VueQr}
}
用法
<vue-qr
:correctLevel="3"
:autoColor="false"
colorDark="#313a90"
:logoSrc="logoSrc"
:text="codeUrl"
:size="240"
:margin="0"
:logoMargin="3">
</vue-qr>
import VueQr from 'vue-qr'
export default {
data () {
return {
logoSrc: require('../assets/weixin-head.jpg'),
codeUrl: 'https://www.toutiao.com/article/7100763829256307215/'
}
},
components: {
VueQr
}
}
参数 | 说明 | 是否必需 |
---|---|---|
text | 二维码内容 | 必需 |
autoColor | 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true | 可选 |
colorDark | 实点的颜色 | 可选 |
colorLight | 空白区的颜色 | 可选 |
logoSrc | 嵌入至二维码中心的 LOGO 地址 | 可选 |
size | 尺寸, 长宽一致, 包含外边距 | 必需 |
margin | 二维码图像的外边距, 默认 20px | 可选 |
logoMargin | 标识周围的空白边框, 默认为0 | 可选 |
correctLevel | 容错级别 0-3 | 可选 |
更多配置项请参考官方文档。