前言
本次将教大家如何只通过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:该方法不仅仅只能用在页面加载的时候，在你获取后端的数据后也可以通过这个方法去访问生成二维码
清除二维码
如果只是使用上面的代码，二维码会一直往上加，也就是不同的生成多个二维码在同一个标签内，
为了每次只生成一个，在生成二维码之前都要清除一下标签下的子元素文章来源：https://www.toymoban.com/news/detail-661282.html
document.querySelector("class标签名").innerHTML = "";
结语
以上为通过vue生成二维码的效果文章来源地址https://www.toymoban.com/news/detail-661282.html
到了这里，关于vue生成二维码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
