vue-qr的生成二维码具体使用

个人觉得vue-qr比canvas好用些，尤其是在控制生成的二维码大小方面，其次是在生成二维码时间方面，canvas生成二维码需要时间，还需要用setTimeOut来控制，但是在vue里，vue的特点就是单页面应用，主张不跳转页面，但是canvas是在刷新页面的时候生成二维码，需要一定的时间，而vue-qr则不需要这样。

具体特点如下：

1. 可设置二维码样式（logo图片、背景图片、背景颜色、尺寸、边距等）。
2. 支持下载

但也有一些缺点，主要就是不支持IE浏览器。

接下来讲下具体怎么使用vue-qr来生成二维码：

　　1.首先是安装，

npm install vue-qr --save

　　2.在项目中的使用

<vue-qr class="bicode" :logoScale="20" :text="codeValue" :margin="0" :dotScale="1"></vue-qr>

import vueQr from 'vue-qr'

data(){
　　return{
　　codeValue: this.$httpConfig.M_HOST + '/guiderRegister?user_id=1',
　　icode: "",
}
} ,
components: {
　　vueQr 
},

接下来介绍下vue-qr的一些常用属性：

text                                      欲编码的内容
size  　　　　　　　　　　　　尺寸, 长宽一致, 包含外边距
margin 　　　　　　　　　　　二维码图像的外边距, 默认 20px
colorDark　　　　　　　　　　实点的颜色
colorLight 　　　　　　　　　 空白区的颜色
bgSrc     　　　　　　　　　　欲嵌入的背景图地址
gifBgSrc     　　　　　　　　  欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor 　　　　　　背景色
backgroundDimming 　　　　 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc 　　　　　　　　　　 嵌入至二维码中心的 LOGO 地址
logoMargin LOGO 　　　　　 标识周围的空白边框, 默认为0
logoBackgroundColor Logo    背景色,需要设置 logo margin
logoCornerRadius LOGO        标识及其边框的圆角半径, 默认为0
whiteMargin                         若设为 true, 背景图外将绘制白色边框