美文网首页
vue生成二维码

vue生成二维码

作者: 一半春夏一半秋冬 | 来源:发表于2019-03-15 11:07 被阅读0次

    1、下载依赖的文件

        npm install qrcodejs2 --S
    

    2、引入文件

         import QRCode from 'qrcodejs2';
    

    3、设置盛放二维码的容器

    <article class="qrcode" ref="fixed_qrcode"></article>
    

    4、初始化二维码参数

    mounted(){
        let than=this;
        than.$nextTick(function(){
            than.qrCoupon=new QRCode(than.$refs.fixed_qrcode,{
                text:' ',
                width:256, // 图像宽
                height:256, // 高
                typeNumber:4,
                colorDark:'#000', // 前景色
                colorLight:'#fff', //背景色
                correctLevel:QRCode.CorrectLevel.L //容错级别(L/M/Q/H)
            });
        });
      }
    

    5、设置二维码内容

    methods(){
       showQrCoupon(){            
     this.qrCoupon.makeCode('www.baidu.com'); 
        },
    }
    

    相关文章

      网友评论

          本文标题:vue生成二维码

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