Vue 生成二维码

前言

起初，设计这个二维码功能的时候，是在服务器端生成二维码，前端下载显示，后来发现了qrcodejs2这个插件，能够在客户端直接生成，不需要服务端支持，所以使用前端生成二维码的方案，这样减少了一次交互。

一、安装qrcodejs2

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

npm install qrcodejs2 --save

二、页面中引入

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

<div id="qrcode" ref="qrcode"></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 //容错级别，
 })
 
 //设置二维码的内容
 qrcode.makeCode("http://www.google.com"); 
 qrcode.clear()//清除二维码。（仅在不支持 Canvas 的浏览器下有效）

qrcodejs的github地址:https://github.com/davidshimjs/qrcodejs