美文网首页vue
vue中qrcode的使用方法

vue中qrcode的使用方法

作者: 一只正在成长的程序猿 | 来源:发表于2019-12-30 17:55 被阅读0次

    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

    相关文章

      网友评论

        本文标题:vue中qrcode的使用方法

        本文链接:https://www.haomeiwen.com/subject/yyimoctx.html