Vue專案中生成二維碼

本來是由後臺生成二維碼的，但是測試後不是很穩定，由於網路問題有時候會載入不過來。。。

之後就發現vue的兩個外掛：vue-qart和vue-qr。對比之後發現，vue-qr的配置更全一些，所以選擇了vue-qr

vue-qart：

1、npm install vue-qart --save

2、import VueQArt from 'vue-qart'

　　new Vue({

   　　 components: {VueQArt}

　　})

3、<vue-q-art :config="config"></vue-q-art>

4、data () {

    　　return {

       　　 config: {

           　　 value: 'https://www.baidu.com',

            　　imagePath: require('../assets/logo.png'),　　//注意這裡的圖片使用require

            　　filter: 'color'

        　　}

   　　 }

　　}

 

vue-qr:

1、npm install vue-qr --save

2、import VueQr from 'vue-qr'

　　new Vue({

   　　 components: {VueQr}

　　})

3、<vue-qr :bgSrc='config.imagePath' :logoSrc="config.imagePath" text="Hello world!" :colorDark="BYTE_POS" :size="200"></vue-qr>

4、data () {

    　　return {

       　　 config: {

　　　　　value: 'www.baidu.com',　　//顯示的值、跳轉的地址

           　　imagePath: require('../assets/logo.png'),　　//中間logo的地址

　　　　　BYTE_POS: 'green'

        　　}

   　　 }

　　}

 

 

配置如下：

bgSrc----背景圖

logoSrc---欲嵌入至二維碼中心的 LOGO 地址

colorDark---實點顏色

colorLight---空白區顏色

dotScale---資料區域點縮小比例