我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

二维码生成插件

预计阅读时间: 3 分钟

一、vue-qr 二维码插件（Image 版）

1. 安装

代码示例
1// 使用node的npm安装
2npm install vue-qr --save
3
4// 使用yarn安装
5yarn add vue-qr

2. 引用项目

代码示例
1<VueQr draggable="false" :correctLevel="3" :dotScale="1" :logoSrc="logo" :margin="15" :size="256" :text="codeUrl" />
代码示例
1import VueQr from "vue-qr";
2
3new Vue({
4	components: { VueQr }
5});

3. 常用属性：

  1. draggable：禁止鼠标图片拖拽；
  2. correctLevel：识别程度容错率，分为 1、2、3，值越容错率越高；
  3. bgSrc：二维码背景图像地址链接；
  4. gifBgSrc：二维码动态背景图像地址链接；
  5. dotScale：构成二维码图像的点的大小；
  6. logoSrc：二维码中心的 logo 图像；
  7. logoScale：二维码 logo 的大小；
  8. logoMargin：logo外边距留白；
  9. margin：二维码边距，默认值 20px；
  10. size：二维码的宽度和高度；
  11. text：二维码生成的内容；
  12. colorDark：二维码实点的颜色，需要配合colorLight一起使用才有效；
  13. colorLight：二维码中空白的颜色，需要配合colorDark一起使用才有效；
注意「👀」：

  这些是常用的属性值，若想更进一步了解，请前去 NPMJS官网查阅。

二、qrcode 二维码插件（Canvas 版）

1. 安装

代码示例
1npm install --save qrcode
2// or
3npm install -g qrcode
4// or
5yarn add qrcode

2. 引用

代码示例
1<canvas id="canvas"></canvas>

引用方法：

代码示例
1var QRCode = require("qrcode");
2
3QRCode.toDataURL("I am a pony!", function (err, url) {
4	console.log(url);
5});
6
7// or
8// errorCorrectionLevel：要绘制二维码的容错率，属性见下表
9QRCode.toCanvas("url", { errorCorrectionLevel: "H" }, function (err, canvas) {
10	if (err) throw err;
11
12	// 渲染生成的二维码
13	var container = document.getElementById("canvas");
14	container.appendChild(canvas);
15});

容错率属性值：

LevelError resistance
L (Low)~7%
M (Medium)~15%
Q (Quartile)~25%
H (High)~30%

三、qrcode.vue 二维码插件

1. 安装

代码示例
1npm install --save qrcode.vue
2// or
3yarn add qrcode.vue

2. 引用

代码示例
1<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>

使用方法：

代码示例
1import QrcodeVue from "qrcode.vue";
2
3export default {
4	data() {
5		return {
6			// 绑定属性值
7			value: "url", // 生成二维码文本链接
8			size: 300 // 二维码宽高大小
9		};
10	},
11	components: {
12		QrcodeVue
13	}
14};

插件属性值：

属性默认值简介
value" "转换二维码的文本链接
className" "二维码类名
size100二维码默认大小
levelL容错级别（提升识别率）
background#fff二维码背景颜色
foreground#000二维码颜色
注意事项：

  对比三个二维码生成插件，各有各的优点和不足之处；相比之下，插件  vue-qr 属性值较多一些，可设置的项也比较多，同时还可以生成  logo；canvas 版本的生成的二维码是  canvas，其余两个生成的二维码是  image 图片，为了减少二维码图片的拖拽，故在模板标签上添加  draggable属性，其作用是为了防止鼠标拖拽图片。