vue+二维码（带logo图片,可直接运行）

前言：

        目前总结的二维码方法有三种，两种是不带logo,1、是  qrcode，2、是  qrcodejs2 ，3、是用 vue-qr（带logo）

一、不带logo的两种用法

实现效果：

步骤（qrcode ）：

1、安装：

              cnpm install qrcode --save

2、调用：
              import QRCode from 'qrcode'       js中调用 

             <canvas ref="qrCode" id='qrCode'></canvas>  template中添加容器

3、methods中写方法

useqrcode(){
        var canvas = document.getElementById('qrCode');
        // var canvas = this.$refs.qrcode;
        let content = this.person.id==undefined?'':this.person.id+'@1';//二维码内容，如果是地址会跳转过去
        QRCode.toCanvas(canvas, content, function (error) {
          if (error){
              console.error(error)
          }else{
              console.log('QRCode success!');
          }
        })
        
      },

4、mounted中调用（注意，不能再created中调用）

mounted() {
    this.useqrcode();//渲染二维码
  },

步骤（qrcodejs2 ）：

1、安装：

              cnpm install qrcodejs2 --save

2、调用：

              import QRCode from 'qrcodejs2'  js中调用

             <div ref="qrCodeDiv" ></div>    template中添加容器

***注意，这里和qrcode的区别就是容器的区别，

 

3、methods中写方法

    /**
     * 初始化绘制二维码
     * */
    useqrcode(){
     var canvas = this.$refs.qrCodeDiv;
     // var canvas =  document.getElementById('qrcode');
      new QRCode(canvas , {
        text: '11111111' ,//二维码内容，如果是路径直接跳转
        width: 360,
        height: 360,
        colorDark: '#000', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
      })

    },

4、mounted中调用（注意，不能再created中调用）

mounted() {
    this.useqrcode();//渲染二维码
  },

二、带logo的用法

实现效果：(这里中间是我自己扣扣截图百度网盘的)

步骤（vue-qr）

1、安装：

              cnpm install vue-qr --save

2、调用：（还要注册，一定要按步骤来）

      （1） js中调用 
              import  VueQr  from '  vue-qr  '   

       （2）template中添加容器

              <vue-qr :logoSrc="imgUrl" text="Hello world!" :size="360"></vue-qr>

支持参数

       （3）data中添加图片路径

               data () {
                       return {
                                imgUrl:require('@/assets/image/logo.png')  //你自己logo路径
                        };
               },

      （4）***components中注册   

                   components: {
                            VueQr
                     },

       到此就结束了！