QRCode 如何在 vue + ts 中使用

最新推荐文章于 2024-10-10 02:30:30 发布

铁树哥写Java

最新推荐文章于 2024-10-10 02:30:30 发布

阅读量4.5k

点赞数 2

分类专栏： vue 文章标签： QRCode

本文链接：https://blog.csdn.net/mhbsoft/article/details/92842278

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

npm install qrcodejs2

main.ts 中

const QRCode = require('qrcodejs2');
Vue.prototype.QRCode = QRCode ;

vue页面中

private QRCode: any;
 
mounted() {
	//生成二维码
	this.qrCode("http://www.baidu.com");
}

private qrCode(url: any): void {
	let qrcode = new this.QRCode('qrcode', {
		width: 100, //图像宽度
		height: 100, //图像高度
		colorDark: "#000000", //前景色
		colorLight: "#ffffff", //背景色
		typeNumber: 4,
		correctLevel: this.QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
	})
	qrcode.clear(); //清除二维码
	qrcode.makeCode(url) //生成另一个新的二维码
}