前言
本次将教大家如何只通过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生成二维码的效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136651.html
