在vue项目中使用qrcodesjs2生成二维码-白红宇

在vue项目中使用qrcodesjs2生成二维码

阅读量：336 次

发布时间：2019-03-04

本文共 869 字，大约阅读时间需要 2 分钟。

使用 qrcodejs2 生成二维码

安装

npm install qrcodejs2 --save

HTML 配置

JavaScript 实现

// 生成二维码printMultipleQRCode() {  for (let i in this.qrcodeList) {    const qrContainer = this.$refs[`qrcode-${i}`];    if (qrContainer) {      new QRCode(qrContainer[0], {        text: this.qrcodeList[i],        render: 'canvas',        width: 130,        height: 130,        colorDark: '#000000',        colorLight: '#ffffff'      });    }  }},// 清除二维码clearQRCode() {  for (let i in this.qrcodeList) {    const qrContainer = this.$refs[`qrcode-${i}`];    if (qrContainer && qrContainer[0]) {      qrContainer[0].innerHTML = '';    }  }},// 初始化并生成二维码this.$nextTick(() => {  this.printMultipleQRCode();});

说明

安装依赖：使用 npm 安装 qrcodejs2 库以便开始使用

HTML 结构：确保有一个容器来渲染多个二维码，使用 v-for 循环处理多个二维码

JS 实现：创建用于生成和清除二维码的方法

打印多个二维码：确保代码可以处理多个二维码容器

清除功能：提供清除现有二维码的功能

通过以上方法，您可以在项目中轻松生成并管理多个二维码。

转载地址：http://megh.baihongyu.com/

你可能感兴趣的文章