vue生成二维码

╰半夏微凉° 2024-04-01 09:12 210阅读 0赞

前言

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

步骤

安装依赖

通过命令

  1. npm install qrcodejs2

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

引入

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

  1. <Script>
  2.     import QRCode from "qrcodejs2"
  3. </Script>

构建通用方法

  1. <Script>
  2.     methods: {
  4.         generateQRCode(classId,value) {
  6.             new QRCode(document.querySelector(classId), {
  8.               text: value,
  9.               width: 180,
  10.               height: 180,
  11.               colorDark: "#000000",
  12.               colorLight: "#ffffff",
  13.               correctLevel: QRCode.CorrectLevel.H
  14.             })
  15.         }
  16.     }
  17. </Script>

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

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

  1. <template>
  2.   <div>
  3.       <!-- 二维码生成区-->
  4.       <div class="classId"></div>
  5.   </div>
  6. </template>

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

完整代码

  1. <template>
  2.   <div>
  3.       <!-- 二维码生成区-->
  4.       <div class="classId"></div>
  5.   </div>
  6. </template>
  7. <Script>
  8. import QRCode from "qrcodejs2"
  9. export default {
  11.     name:"xxx",
  12.     methods: {
  14.         generateQRCode(classId,value) {
  16.             new QRCode(document.querySelector(classId), {
  18.               text: value,
  19.               width: 180,
  20.               height: 180,
  21.               colorDark: "#000000",
  22.               colorLight: "#ffffff",
  23.               correctLevel: QRCode.CorrectLevel.H
  24.             })
  25.         }
  26.     },
  27.     // 在页面加载的时候调用
  28.     created() {
  30.     this.generateQRCode(".classId","测试用于生成二维码的文本");
  31.     },
  32. }
  33. </Script>

实例

以下截图为我项目中实际的二维码截图
在这里插入图片描述
ps:该方法不仅仅只能用在页面加载的时候，在你获取后端的数据后也可以通过这个方法去访问生成二维码

清除二维码

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

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

结语

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

发表评论

表情：
评论列表 （有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读