QRCode使用（生成二維碼）

時間 2019-11-21

原文原文鏈接

最近項目有個需求，須要將一個鏈接生成二維碼展現出來，而後在網上找到了QRCode這個插件，這裏大體記錄下它的使用方法vue

介紹： QRCode.js 是一個用於生成二維碼的 JavaScript 庫。主要是經過獲取 DOM 的標籤,再經過 HTML5 Canvas 繪製而成,不依賴任何庫npm

1.安裝dom

由於這個項目用的是vue，因此在vue中安裝qrcodejs2包

npm install qrcodejs2 --save

二、引入qrcodejs2包this

VUE中引入qrcodejs2包

import QRCode from 'qrcodejs2'

若是要全局引入qrcodejs2包，能夠在main中進行定義spa

import QRCode from 'qrcodejs2';

Vue.prototype.$QRCode = QRCode ;

三、使用QRCodeprototype

在須要生成二維碼的div插件

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

生成二維碼code

setTimeout（（）=>{
    let qrcode = new QRCode('qrcode', { //這裏‘qrcode’是dom對象，也能夠是this.$refs.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
    })
    

}）