Vue引入qrcode.js实现生成二维码

最近Vue音视频项目应用层中有JavaScript生成二维码的需求，所以记录下整个二维码生成的步骤。

[1] vue-qr是基于qrcode.js封装的vue库，可以动态生成二维码，并且可以自定义样式。

npm install vue-qr --save

[2] 在项目模板中引入如下vue-qr：

<script>
  import VueQr from 'vue-qr'
<script>

[3] 初始化config配置对象,可以从网络中加载数据，为了演示方便，这里是用的静态数据。

tip:我主要是WebView进行扫码，二维码识别，并根据id=ASDEEFDDSS223DXX和type=2处理业务逻辑，所以自己可以根据业务逻辑设定自己需要的数据，并结合vue-router进行动态路由。

data() { 
return {
        config: {
          logo: './warn.jpg',//默认二维码中间图片
          text: "ASDEEFDDSS223DXX 2" //二维码内容,编码格式默认使用base64
        }
      }
    },

[4] 并在模板中引入相应的自定义标签，并绑定config对象

<template>
<vue-qr class="vue-qr" :text="config.text" :logoScale="50" :size="300"></vue-qr>
</template>

参数说明：
1、class  根据自己的情况，如web或者app自己动态调整
2、:text  用于绑定生成二维码内容
3、:logoScale  中间logo标志大小，单位px
4、二维码大小,单位px
tip:不能更改单位，如需要改变进行app适配使用rem,需要外层嵌套div

 下面上一张效果图：