vue生成二维码

前言

本次将教大家如何只通过vue前端快速的生成二维码

步骤

安装依赖

通过命令

npm install qrcodejs2

安装二维码生成的依赖包到我们的项目中

引入

在自己需要构建生成的页面进行引入

<Script>
	import QRCode from "qrcodejs2"
</Script>

构建通用方法

<Script>
	methods: {
		generateQRCode(classId,value) {
	        new QRCode(document.querySelector(classId), {
	          text: value,
	          width: 180,
	          height: 180,
	          colorDark: "#000000",
	          colorLight: "#ffffff",
	          correctLevel: QRCode.CorrectLevel.H
	        })
		}
	}
</Script>

ps:
其中里面的参数classId为html的class标签名称
value为需要将哪些数据进行构建生成二维码
通过该方法，我们只需要在需要生成的时候调用该方法，即可很快捷的生成二维码
在很多项目上都是通用的

在页面指定位置进行生成二维码

<template>
  <div>
  	<!-- 二维码生成区-->
  	<div class="classId"></div>
  </div>
</template>

ps: 这里的classId对应上方方法的标签名传的参数

完整代码

<template>
  <div>
  	<!-- 二维码生成区-->
  	<div class="classId"></div>
  </div>
</template>
<Script>
import QRCode from "qrcodejs2"
export default {
    name:"xxx",
	methods: {
		generateQRCode(classId,value) {
	        new QRCode(document.querySelector(classId), {
	          text: value,
	          width: 180,
	          height: 180,
	          colorDark: "#000000",
	          colorLight: "#ffffff",
	          correctLevel: QRCode.CorrectLevel.H
	        })
		}
	},
	// 在页面加载的时候调用
	created() {
	this.generateQRCode(".classId","测试用于生成二维码的文本");
	},
}
</Script>

实例

以下截图为我项目中实际的二维码截图

ps:该方法不仅仅只能用在页面加载的时候，在你获取后端的数据后也可以通过这个方法去访问生成二维码

清除二维码

如果只是使用上面的代码，二维码会一直往上加，也就是不同的生成多个二维码在同一个标签内，
为了每次只生成一个，在生成二维码之前都要清除一下标签下的子元素

document.querySelector("class标签名").innerHTML = "";

结语

以上为通过vue生成二维码的效果