前端 js 生成二维码
- 作者:
- runtucms
- 最后修订:
- 2020-07-03 17:20:41
- 开发日志 857
摘要:部分场景下,二维码无须后端存储,仅需要前端进行展示,此时可以使用前端js生成二维码
需要用到二维码生成库 QRCode.js
npm安装依赖包
npm install qrcodejs2 --save
导入
import QRCode from 'qrcodejs2';
使用
<div id="qrcode" ref="qrcode"></div>
this.$nextTick(()=>{
var qrcode = new QRCode(this.$refs.qrcode, {
text: 'https://www.baidu.com',
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
})
注意
一定要在div生成之后再生成二维码,否则就会出现Cannot read property ‘appendChild’ of null"的错误,因此这里用到了$nextTick
,也就是等待布局渲染之后再生成二维码