1. 程式人生 > >VUE 生成二維碼(qrcodejs)

VUE 生成二維碼(qrcodejs)

1. 概述

1.1 引入二維碼生成模組

npm install qrcodejs2 --save

  注意:此處安裝qrcodejs2,安裝依賴後可在main方法中進行全域性引用設定,也可單獨某個頁面中進行引用設定。

1.2 引入使用

import QRCode from 'qrcodejs2';

  備註:在main中設定全域性可使用 Vue.prototype.$qrCode = 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.1 vue簡單示例顯示