在Vue中使用QRCode生成二维码

首先安装依赖包

npm/cnpm install --save qrcode

下面是qrcode.vue文件
在script标签导入qrcode

import QRCode from "qrcode";

我一般是写在mounted里面，如果需要什么条件除外

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）
      })
	}
}

接下来就是template模板了

<template>
 　　<div class="qrcode">
          <img :src="qrcode" alt="">  //这里的src的值就是上面生成的二维码的地址
          <div><p>请长按上方二维码识别...</p></div> //这里的css样式我就不写出来了
      </div>     
</template>

好了这样就行了，下面效果图

其他配置详见官方文档
QRCode

我是因为踩了qrcodejs2的坑，后面改成用qrcode，qrcodejs2跟qrcode不一样，qrcodejs2是直接生成img标签二维码图片，不是src地址，生成的img标签有一个属性alt=“scan me”。这个alt属性有一个bug，我用我手机测生成的二维码界面没问题，但是我同事测的就会有一个问题就是关于alt属性。他的界面有二维码，但是右边还有一个不可见缩略的小图片以及scan me 文字，最重要的是长按不会弹出识别二维码。不排除是因为网络的原因。
如果想使用这种方式请参考
https://blog.csdn.net/qq_43138078/article/details/90510637