Use QRCode.js in vue

1. What is QRCode.js

QRCode.js is a JavaScript library for making QR codes. QRCode.js supports cross-browsing using HTML5 canvas and table tags in HTM. QRCode.js has no dependencies

2. Install QRCode.js package in vue

 npm i qrcodejs2

Three, the qrcodejs2 package is introduced in vue

import QRCode from 'qrcodejs2'

4. Create a DOM element and store the location of the QR code

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

Fifth, the method of generating a QR code

qrCode (url) {
    
    
    let qrcode = new QRCode('qrcode', {
    
    
        width: 150, //图像宽度        height: 150, //图像高度        colorDark : "#000000", //前景色        colorLight : "#ffffff", //背景色        typeNumber:4,         correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
    })    qrcode.clear() //清除二维码 
    qrcode.makeCode(url) //生成另一个新的二维码
}

由于使用不起作用，在调用qrCode前使用js原生方法清空元素内容

document.getElementById('qrcode').innerHTML = ''