什么是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>
methods
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); //生成另一个新的二维码
}
全部代码
<template>
<div>
<div id="qrcode" ref="qrcode"></div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
mounted() {
this.qrCode("http://fanyi.youdao.com/");
},
methods: {
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); //生成另一个新的二维码
}
}
};
</script>
<style></style>