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>