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"
複製程式碼