码迷,mamicode.com
首页 > Web开发 > 详细

在VUE中使用QRCode.js

时间:2018-10-29 19:54:10      阅读:839      评论:0      收藏:0      [点我收藏+]

标签:tag   qrcode.js   script   rom   一个   correct   容错   select   sel   

什么是QRCode.js

QRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系

VUE里安装QRCode.js包

npm i qrcodejs2

VUE中引入qrcodejs2包

import QRCode from ‘qrcodejs2‘

创建DOM元素,存储二维码的位置

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

生成二维码方法

qrCode (url) {
    let qrcode = new QRCode(‘qrcode‘, {
        width: 150, //图像宽度
height: 150, //图像高度
colorDark : "#000000", //前景色
colorLight : "#ffffff", //背景色
typeNumber:4,
correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有:(1)QRCode.CorrectLevel.L (2)QRCode.CorrectLevel.M (3)QRCode.CorrectLevel.Q (4)QRCode.CorrectLevel.H
})
qrcode.clear() //清除二维码 qrcode.makeCode(url) //生成另一个新的二维码 }

ps:由于使用不起作用,在调用qrCode前使用js原生方法清空元素内容

document.getElementById(‘qrcode‘).innerHTML = ‘‘

在VUE中使用QRCode.js

标签:tag   qrcode.js   script   rom   一个   correct   容错   select   sel   

原文地址:https://www.cnblogs.com/cuixiaozhen/p/9872307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!