VUE 生成二維碼(qrcodejs)

1. 概述

1.1 引入二維碼生成模塊

npm install qrcodejs2 --save

　　注意：此處安裝qrcodejs2，安裝依賴后可在main方法中進行全局引用設置，也可單獨某個頁面中進行引用設置。

1.2 引入使用

import QRCode from 'qrcodejs2';

　　備注：在main中設置全局可使用 Vue.prototype.$qrCode = QRCode; ，頁面中調用可直接使用 this.$qrCode

1.3 頁面展示與配置

　　1.3.1 html代碼

<div id="qrCode" ref="qrCodeDiv"></div>

　　1.3.2 js代碼

new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://www.baidu.com',
          width: 200,
          height: 200,
          colorDark: "#333333", //二維碼顏色
          colorLight: "#ffffff", //二維碼背景色
          correctLevel: QRCode.CorrectLevel.L//容錯率，L/M/H
        })

1.4 注意點

　　1.顯示內容(text所指向內容)必須是UTF-8編碼格式。

　　2.生成二維碼js必須在 this.$nextTick(function(){調用})或setTimeout(() => { 調用 }, 100)，是為了確保二維碼容器DOM已經存在。

　　3.為了防止重復生成二維碼，使用置空進行控制：document.getElementById("qrcode").innerHTML = "";

 2. 實例

 2.1 vue簡單示例

<template>
  <div id="qrCode" ref="qrCodeDiv"></div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  export default {
    name: "qrCode",
    data() {
      return {}
    },
    mounted: function () {
      this.$nextTick(function () {
        this.bindQRCode();
      })
    },
    methods: {
      bindQRCode: function () {
        new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://www.baidu.com',
          width: 200,
          height: 200,
          colorDark: "#333333", //二維碼顏色
          colorLight: "#ffffff", //二維碼背景色
          correctLevel: QRCode.CorrectLevel.L//容錯率，L/M/H
        })
      }
    }
  }
</script>

 2.2 vue簡單示例顯示