vue生成二维码

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

## 前言 ##

本次将教大家如何只通过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**为需要将哪些数据进行构建生成二维码  
通过该方法，我们只需要在需要生成的时候调用该方法，即可很快捷的生成二维码  
在很多项目上都是通用的

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

`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>

#### 实例 ####

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

#### 清除二维码 ####

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

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

## 结语 ##

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

[77875a05de8d42c594288fd12d35ca0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/da9448cff1b1419797a91565d488ba65.png