vue中qrcode的使用方法

1.先下载

npm install qrcode --save-dev	

2.引入

import QRCode from "qrcode"; //引入生成二维码插件

3.生成二维码

<template>
	<canvas id="QRCode_header"></canvas>
</template>	

<script>
    import QRCode from "qrcode"; //引入生成二维码插件
    export default {
        data(){
            return{
				this.QRCodeMsg：""
            }
        }
        getQRCode() {
                let opts = {
                    errorCorrectionLevel: "H",//容错级别
                    type: "image/png",//生成的二维码类型
                    quality: 0.3,//二维码质量
                    margin: 12,//二维码留白边距
                    width: 200,//宽
                    height: 180,//高
                    text: "http://www.xxx.com",//二维码内容
                    color: {
                        dark: "#333333",//前景色
                        light: "#fff"//背景色
                    }
                };
                this.QRCodeMsg = "http://www.baidu.com"; //生成的二维码为URL地址js
                let msg = document.getElementById("QRCode_header");
                // 将获取到的数据（val）画到msg（canvas）上
                QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
                    conso.log(error)
                });
            },
    }
</script>

api

width	图像宽度
height	图像高度
colorDark	前景色
colorLight	背景色
correctLevel	QRCode.CorrectLevel.L 容错级别，可设置为：
	QRCode.CorrectLevel.L
	QRCode.CorrectLevel.M
	QRCode.CorrectLevel.Q
	QRCode.CorrectLevel.H

参考链接

vue-qr