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

最新推荐文章于 2024-09-13 21:49:43 发布

Right atrium

最新推荐文章于 2024-09-13 21:49:43 发布

阅读量1.3k

点赞数

分类专栏： Vue H5

本文链接：https://blog.csdn.net/Kino_Hs/article/details/117120731

版权

vue js 前端 html5

Vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

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