天天看點

前端之根據資訊生成二維碼vueQr:qrcodejs2:

vueQr:

       下載下傳:npm i vueQr

         使用:

<vue-qr  :text="info.id" :size="150" :margin="10" class="imgs"></vue-qr>


//js
import vueQr from 'vue-qr'
components: {
vueQr
},
           

qrcodejs2:

        下載下傳:npm i  qrcodejs2

         使用:

<div class="qrcode" ref="qrCodeUrl"></div> 

//js
import QRCode from "qrcodejs2"


creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'content',  //需要轉換為二維碼的内容
            width: 100, //二維碼寬度
            height: 100,  //二維碼高度
            colorDark: '#000000', //前景色   
            colorLight: '#ffffff', //後景色
            correctLevel: QRCode.CorrectLevel.L //容錯級别
        })
    }
           

繼續閱讀