使用 qrcodejs2 生成二维码详细API和参数

使用 qrcodejs2 生成二维码

安装 qrcodejs2

cnpm install qrcodejs2 --save

使用 qrcodejs2

页面引入

import QRCode from 'qrcodejs2'

页面标签

<div id="qrcode" ref="qrcode"></div>

可以使⽤ id 或者 ref，建议使⽤ ref，因为使⽤ vue 框架控制虚拟 Dom 才是正确的选择简单⽅便

createQRcode(WIDTH, id, text) {
  let long = document.documentElement.clientWidth * (WIDTH / 375)
  new QRCode(id, {
    width: long,
    height: long,
    text: text,
    correctLevel : QRCode.CorrectLevel.L
  });
  // correctLevel 容错级别，可设置为：
  // QRCode.CorrectLevel.L
  // QRCode.CorrectLevel.M
  // QRCode.CorrectLevel.Q
  // QRCode.CorrectLevel.H
  // L - M - Q - H 码密度越来越高，默认不设置是用 H
},
// this.createQRcode(132, `qrcode`, `${this.DOMAIN}`);

参数说明

new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

Options

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H 从上至下生成码密度越来越高 L - M - Q - H

Events

名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）

资源 

qrcodejs2 - npmJavsacript QRCode for all browsers. Latest version: 0.0.2, last published: 7 years ago. Start using qrcodejs2 in your project by running `npm i qrcodejs2`. There are 166 other projects in the npm registry using qrcodejs2.https://www.npmjs.com/package/qrcodejs2