vue生成二维码

1. 安装二维码模块

        npm i QRCode --save 

2.安装成功会在package.json中增加一下内容

“qrcode”:"1.2.2"

3.当前页导入qrcode

import QRCode from "qrcode";

4.vue代码

export default {

    name: "qrcode",

data(){

        return {

        url: "http://www.baidu.com"  //识别二维码后跳转的地址

            qrcode:'' //存储二维码地址

        }

  },

mounted(){

QRCode.toDataURL(this.url,{ 

//这个this.url就是你扫码后要跳转的地址

//或者是长按识别跳转的地址（两者是一样的），这个url是全局变量

//这里也可以是文本内容，扫描后会弹出一个空白界面文本

        version: 7,    //这个是版本号，

        errorCorrectionLevel: 'Q', //这个是容错率,(建议选较低)更高的级别可以识别

        //更模糊的二维码，但会降低二维码的容量

        width: 280,       

        height: 280,  //设置二维码图片大小

        margin: 0, 

      })

        .then(url => {  /这个url是二维码生成地址，也就是相当于图片地址

          console.log(url);

          this.qrcode = url //这个是vue实例全局的变量，赋值给他。后面会用在img的src属性上

        })

        .catch(err => {

        console.error(err)  //这里看不懂的话去看一下Promise（then, catch）

      })

}

}