在vue中使用QRCode.js

一、什么是QRCode.js

QRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系

二、vue里安装QRCode.js包

 npm i qrcodejs2

三、vue中引入qrcodejs2包

import QRCode from 'qrcodejs2'

四、创建DOM元素,存储二维码的位置

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

五、生成二维码方法

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 = ''

猜你喜欢

转载自blog.csdn.net/qq_45846359/article/details/113646405