1.安装qrcode
npm install qrcode --save–dev
2.在需要实现二维码的组件中或者main.js中引入
<template>
<canvas id="QRCode_header"></canvas>
</template>
<script>
//引入qrcode
import QRCode from 'qrcode'
export default {
data(){
return {
QRCodeMsg:"",
}
},
methods:{
getQRCode(){
let opts = {
errorCorrectionLevel: "H",//容错级别
type: "image/png",//生成的二维码类型
quality: 0.3,//二维码质量
margin: 6,//二维码留白边距
width: 200,//宽
height: 180,//高
text: "http://www.xxx.com",//二维码内容
color: {
dark: "#333333",//前景色
light: "#fff"//背景色
}
};
this.QRCodeMsg = "https://www.baidu.com/"; //生成的二维码为URL地址js
let msg = document.getElementById("QRCode_header");
// 将获取到的数据(val)画到msg(canvas)上
QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
console.log(error)
});
},
},
mounted(){
//调用
this.getQRCode()
}
}
</script>
效果: