cnpm install QRCodejs2 --save
// 或者
npm install qrcodejs2 --save
插件导入
使用commonjs或者es6模块方式
import QRCode from 'qrcodejs2';
// 或者
let qrcode = require('qrcodejs2');
页面容器
页面增加一个容器标签
<div id="qrcode" ref="qrcode"></div>
实例化
creatQrCode() {
let text = '二维码内容';
let qrcode = new QRCode(this.$refs.qrcode, {
text: text, //二维码内容字符串
width: 128, //图像宽度
height: 128, //图像高度
colorDark: '#000000', //二维码前景色
colorLight: '#ffffff', //二维码背景色
correctLevel: QRCode.CorrectLevel.H, //容错级别
})
}
问题处理1、清除已经生成的二维码
方案一：this.$refs.qrcode.innerHTML = '';
方案二： qrcode.clear(); // 清除二维码方法二
2、动态替换二维码的内容
let string='新的内容'
qrcode.makeCode(string)
3、报错提醒 Error: code length overflow ？
这是因为url太长，导致二维码加载报错，可以调低容错率来处理。
修改参数：correctLevel: QRCode.CorrectLevel.H ，容错级别，由低到高分别为L M Q H
4、字符串较长，二维码显示模糊怎么办？可以尝试先将生成的二维码倍数扩大，然后在css上面固定显示宽高，这样可以扩大显示像素精度
.qrcode-wrap{
width: 128px;
height: 128px;
}
.qrcode-wrap canvas,
.qrcode-wrap img {
width:100%;
height:100%;
}
<div id="qrcode" ref="qrcode" class="qrcode-wrap"></div>
creatQrCode() {
let text = '二维码内容';
let qrcode = new QRCode(this.$refs.qrcode, {
text: text,
width: 128 * 3, //宽扩大3倍
height: 128 * 3, //高扩大3倍
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
})
}
5、二维码想要带白边怎么办？
插件默认生成的图片是没有边框的
如果只想在页面显示上有边框
方案一：直接给容器上面加样式，利用padding的特性，挤出白边
.qrcode-border{
display: flex;
width: 128px;
height: 128px;
box-sizing: border-box;
padding: 10px;/*利用padding*/
border: 1px solid rgb(204, 204, 204);
}
<div id="qrcode" ref="qrcode" class="qrcode-border"></div>
方案二：给容器加一个带边框样式的父级容器
.qrcode-container{
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
border: 1px solid #cccccc;
}
<div class="qrcode-container">
<div id="qrcode" ref="qrcode"></div>
</div>
效果展示
✅PS：如果只想【打印】的白边边框，这两种方案也可以
