什麼是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>

methods

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

全部程式碼

<template>
  <div>
    <div id="qrcode" ref="qrcode"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  mounted
 
() {
    this.qrCode("http://fanyi.youdao.com/");
  },
  methods: {
    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); //生成另一個新的二維碼
    }
  }
};
</script>

<style></style>