二维码生成插件
Posted zxk5211
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了二维码生成插件相关的知识,希望对你有一定的参考价值。
(vue)二维码生成插件
一、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?属性,其作用是为了防止鼠标拖拽图片。
以上是关于二维码生成插件的主要内容,如果未能解决你的问题,请参考以下文章
Cordova各个插件使用介绍系列—$cordovaBarcodeScanner扫描二维码与生成二维码