Vue引入vue-qr组件实现生成二维码，且实现在二维码中间加入logo图片功能

一、vue-qr是什么？

SumiMakito 的 Awesome-qr.js的 Vue 2.x 组件
适用于 Vue.js 的二维码组件！

官网：https://www.npmjs.com/package/vue-qr

二、使用步骤

1.用npm安装vue-qr组件

代码如下（示例）：

npm install vue-qr --save

2.引入vue-qr组件

代码如下（示例）：

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

export default {
    components: {
    VueQr,
    },
}
</script>

3.在模板中进行使用

初始化config配置对象,可以从网络中加载数据
引入logo图片须使用 require( ) 函数，否则会出现404图片加载错误的报错提示，如下图

正确代码如下（示例）：

data() {
  return {
    config: {
          logo:require("@/assets/images/1.jpg"),//默认二维码中间图片
          text: "Hello World!" //二维码内容,编码格式默认使用base64
        }
  }
},

在模板中写入进行使用

代码如下（示例）：

<template>
  <vue-qr :text="config.text" :logoScale="40" :size="300" :logoSrc="config.logo">
  </vue-qr>
</template>

参数说明：
1、:text 用于绑定生成二维码内容
2、:logoScale 中间logo标志大小，单位px
3、:logoSrc 用于绑定二维码中间logo图片的地址
tip:不能更改单位，如需要改变进行app适配使用rem,需要外层嵌套div

效果图展示如下：

vue-qr组件中可修改的属性如下图：

---

总结

以上就是引入vue-qr组件实现生成二维码，并在二维码中间加入logo的全部内容。