vue 中使用 QRCode.js 链接转二维码带中间图片

前言

项目中需要一个链接转二维码的功能，找了一下 决定使用QRCode.js（很久以前的插件了）

下载引入1.

<div id="qrcode" ref="qrcode"></div>

// 下载
npm install --save qrcodejs2
// 在需要的文件页面中引入
import QRCode from 'qrcodejs2'

使用2.

// aa() 是你需要在哪里使用就调用 qrcode()
aa(){
    
    
 this.$nextTick(() => {
    
    
        this.qrcode(链接)
      })
}

  // 定义一个函数 生成二维码
   qrcode (text) {
    
    
      const qrcode = new QRCode('qrcode', {
    
    
        width: 132,
        height: 132,
        text: text, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      return qrcode
    }
     // 如果是在弹框里面使用的话，关闭之后要清除二维码，否则会再次生成一个
     this.$refs.qrcode.innerHTML = '' // 清除

中间加图片3.

QRCode.js中没有中间加图片的方法，可以放一张图片定位在二维码中间（我是这样做的 扫码测试了没有问题，哈哈！）

ps:有问题可以评论留言，欢迎各位大佬提出你们宝贵的意见&&建议 ，觉得本文对你有帮助还请留下您的 “大拇指”，以示鼓励和支持！