一、什么是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 = ''