Two-dimensional code generation plug-in

(Vue) two-dimensional code generation plug-in

A, vue-qr code plug-dimensional (Image Edition)

1. Install

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

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

2. The reference project

<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. Common attributes:

1. draggable with : Prohibition Mouse image drag;
2. correctLevel : recognition of the degree of fault tolerance, 1,2,3 divided, the higher the value of fault tolerance;
3. bgSrc : two-dimensional code background image address link;
4. gifBgSrc : two-dimensional code image dynamic background address link;
5. dotScale : dot size constituting the two-dimensional code image;
6. logoSrc : center logo image two-dimensional code;
7. logoScale : two-dimensional code logo size;
8. logoMargin : logo margins blank;
9. margin : Margin two-dimensional code, the default value 20px;
10. size : the width and height of the two-dimensional code;
11. text : a two-dimensional code generating content;
12. colorDark : solid color two-dimensional code points, need to meet colorLight used with valid;
13. colorLight : white color two-dimensional code, it is necessary with colorDark used with valid;

Note : These are commonly used property values, if you want further information, please go NPM official website  to view.

Two, qrcode plug-dimensional code (Canvas Edition)

1. Install

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

2. References

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

Reference Methods:

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);
});

Fault tolerance property values:

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

Three, qrcode.vue two-dimensional code plug-ins

1. Install

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

2. References

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

Instructions:

import QrcodeVue from 'qrcode.vue';

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

Plug property values:

Attributes	Defaults	Brief introduction
value	" "	Convert two-dimensional code text link
className	" "	Two-dimensional code class name
size	100	The default size of the two-dimensional code
level	L	Level of fault tolerance (to enhance the recognition rate)
background	#fff	QR code background color
foreground	#000	Two-dimensional color code

Note : Compare code generating three-dimensional plug-in, each have their own advantages and shortcomings; in contrast, plug  vue-qr  attribute value larger number, the items may be more disposed, but also can generate a  logo ; canvas  version of the generated code is a two-dimensional  canvas , the other two-dimensional code is generated  image  picture, the two-dimensional code in order to reduce drag and drop images, it added to the template tag  draggable  attribute, its role is to prevent the mouse drag image.