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, 背景圖外將繪制白色邊框