vue 中二维码的使用和工具比较

在开发项目中，有可能会碰到生成二维码的需求，尤其是在微信相关的项目中，可能会涉及扫码登录，扫码查询等功能。这里笔者为大家介绍两种vue项目的可以使用的二维码工具。
首先，先看一下示例效果，感兴趣的可以继续往下看：

示例中是用两种不同的二维码工具生成的三种表现效果，下面来介绍一下生成二维码的两种工具。
第一种：vue-qart
vue-qart文档地址
安装：npm install vue-qart –save
引入：
直接在vue组件使用就可以。
首先，导入相关组件。

import VueQArt from 'vue-qart'

然后注册组件

new Vue({
    components: {VueQArt}
})

使用：

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

data () {
    return {
        config: {
            value: 'https://www.baidu.com',
            imagePath: require('../../assets/img-demoUser.jpg'),
            filter: 'color'
        }
    }
}

最终生成的效果就是示例图中第一种的效果。
第二种：vue-qr
vue-qr文档地址
安装：npm install vue-qr –save
引入：
同样是在vue组件中直接引入使用。

import VueQr from 'vue-qr'
new Vue({
    components: {VueQr}
})

使用：

<vue-qr :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>

这个工具在使用中发现：官方示例height,width并没有起作用，想要改变大小需要使用size,文档中说默认会有margin边框，实际使用确实有，但是二维码不居中，所以我使用的时候直接将margin置为0。
使用logoSrc 的时候，安卓和苹果上是有不同的表现效果的，苹果上显示logo图，安卓上不显示，不清楚什么原因。
另外，使用网络图片的时候，最好将图片路径http改成https,以避免不必要的错误。
下面是我的项目示例地址：
项目示例地址，可查看如何实例使用