在Vue中生成二维码(前端生成二维码:Qrcode)

1、首先我们需要使用"npm install --save qrcode"下载依赖包

npm install --save qrcode

2、在要使用qrcode的页面导入qrcode

import QRCode from "qrcode";

3、template

<template>
    <div class="index-body">
        <div class="qrcode">
            <img :src="qrcode" alt=""> <!-- 这里的src的值就是生成的二维码的地址 -->
        </div>
    </div>
</template>

4、js

export default {
    components: {
        
    },
	data() {
		return {
            url: "http://www.baidu.com", //识别二维码后跳转的地址或文本
            qrcode:'' //存储二维码图片的路径
		}
	},
	created() {
        
	},
	methods: {
        
	},
	mounted() {
		QRCode.toDataURL(this.url,{//这个this.url就是你扫码后要跳转的地址
            version: 7, //版本号
            errorCorrectionLevel: 'Q', //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
            width: 280, //设置二维码图片大小
            height: 280, 
		})
		.then(url => { 
		    console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
		    this.qrcode = url //赋值给变量。用在img的src属性上
		})
		.catch(err => {
		    console.error(err)
		})
	},
}

5、效果