vue-cli 項目下生成二維碼

使用 qrcodejs2

首先：

npm install --save qrcodejs2
複製代碼

而後在須要生成的相關頁面：

import QRCode from 'qrcodejs2' 
 
    methods:{
        // 動態生成二維碼
	   qrcode () {  
               let qrcode = new QRCode('qrcode', {
			        width: 200, // 設置寬度，單位像素
			        height: 200, // 設置高度，單位像素
			        text: 'https://www.baidu.com'   // 設置二維碼內容或跳轉地址
                              })
		}  
	},
	created () {
		this.$nextTick(() => {
			this.qrcode()
		})
	}
複製代碼

html:

<template>
  <div id="query">
    <h1>二維碼：</h1>
   <div id="qrcode" ref="qrcode"></div>
  </div>
</template>
複製代碼

須要注意的點

在created裏面調用的時候，要放在 this.$nextTick 回調函數裏面調用，否則會報錯誤：
Error in created hook: "TypeError: Cannot read property 'appendChild' of null"
複製代碼