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---数据区域点缩小比例