Vue
-通过qrcodejs2
实现二维码
一、实现效果
二、实现方法
【1】、安装qrcodejs2
npm i qrcodejs2 --save
或者
yarn add qrcodejs2 --save
【2】、实现代码
1、引入QRCode
import QRCode from "qrcodejs2";
2、书写二维码的html
<!-- 二维码 -->
<div class="qrCode" ref="qrCodeDiv"></div>
3、调用绑定二维码的方法
this.$nextTick(() => {
this.bindQRCode();
});
4、封装绑定二维码的方法
// 绑定二维码
bindQRCode() {
new QRCode(this.$refs.qrCodeDiv, {
// TODO: 扫码访问的内容
text: "https://www.baidu.com",
width: 128,
height: 137.5,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L, //容错率,L/M/H
});
},