vue HTML前端生成二维码

时间:2024-03-18 16:09:09

插件:QRCode

效果图:vue HTML前端生成二维码

一、安装qrcodejs2

在工程目录下运行如下命令

npm install qrcodejs2 --save

二、页面中引入

在页面中加入一个放二维码的div

三、生成二维码

引入

import QRCode from ‘qrcodejs2’
import $ from 'jquery
生成二维码代码

let qrCode = new QRCode(‘qrcode’, {
width: 255,//二维码宽度,单位像素
height: 255,//二维码高度,单位像素
text: ‘http://www.baidu.com’, //二维码中的内容
colorDark : ‘#000000’,//前景色
colorLight : ‘#ffffff’,//背景色
correctLevel : QRCode.CorrectLevel.H //容错级别,
})
vue HTML前端生成二维码
vue HTML前端生成二维码
绘制生成的时候有可能先加载了js代码 所以在调用的时候用setTimeout(()=>{},200)就OK