1. 程式人生 > >在VUE中使用QRCode.js

在VUE中使用QRCode.js

strong select rom 依賴 str 生成 color imp 不起作用

什麽是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) //生成另一個新的二維碼
}

ps:由於使用不起作用,在調用qrCode前使用js原生方法清空元素內容

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

在VUE中使用QRCode.js