Vue二维码插件

最新推荐文章于 2025-05-17 14:31:38 发布

原创最新推荐文章于 2025-05-17 14:31:38 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

vue插件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种Vue二维码插件：vue-qr（Image版）、qrcode（Canvas版）和qrcode.vue。详细讲解了安装、引用及常用属性，如容错率、背景图像、logo设置等。vue-qr提供更多的配置选项，而Canvas版生成的是canvas元素，可以防止鼠标拖拽图片。

二维码生成插件

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

1. 安装

// 使用node的npm安装 
npm install vue-qr --save

// 使用yarn安装 
yarn add vue-qr

2. 引用项目

<VueQr 
		draggable="false" 
		:correctLevel="3" 
    :dotScale="1" 
    :logoSrc="logo" 
    :margin="15" 
    :size="256" 
    :text="codeUrl" 
 />

import VueQr from "vue-qr";

new Vue({
	components: {VueQr}
});

3. 常用属性：

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

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

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

1. 安装

npm install --save qrcode
// or
npm install -g qrcode
// or
yarn add qrcode

2. 引用

<canvas id="canvas"></canvas>

引用方法：

var QRCode = require('qrcode');

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url)
});

// or  
// errorCorrectionLevel：要绘制二维码的容错率，属性见下表
QRCode.toCanvas('url', { errorCorrectionLevel: 'H' }, function (err, canvas) {
  if (err) throw err;
  
  // 渲染生成的二维码
  var container = document.getElementById('canvas');
  container.appendChild(canvas);
});

容错率属性值：

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

三、qrcode.vue二维码插件

1. 安装

npm install --save qrcode.vue
// or
yarn add qrcode.vue

2. 引用

<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>

使用方法：

import QrcodeVue from 'qrcode.vue';

export default {
  data() {
    return {
      // 绑定属性值
      value: 'url', // 生成二维码文本链接
      size: 300 // 二维码宽高大小
    }
  },
  components: {
    QrcodeVue
  }
};

插件属性值：

属性	默认值	简介
value	" "	转换二维码的文本链接
className	" "	二维码类名
size	100	二维码默认大小
level	L	容错级别（提升识别率）
background	#fff	二维码背景颜色
foreground	#000	二维码颜色

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