npm install qrcodejs2 --save
注意:此處安裝qrcodejs2,安裝依賴後可在main方法中進行全局引用設置,也可單獨某個頁面中進行引用設置。html
import QRCode from 'qrcodejs2';
備註:在main中設置全局可以使用 Vue.prototype.$qrCode = QRCode; ,頁面中調用可直接使用 this.$qrCodevue
<div id="qrCode" ref="qrCodeDiv"></div>
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.顯示內容(text所指向內容)必須是UTF-8編碼格式。npm
2.生成二維碼js必須在 this.$nextTick(function(){調用})或setTimeout(() => { 調用 }, 100),是爲了確保二維碼容器DOM已經存在。this
3.爲了防止重複生成二維碼,使用置空進行控制:document.getElementById("qrcode").innerHTML = "";編碼
<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>