佳佳的博客

Vue.js 生成二维码

🏷️ Vue.js QRCode

后台管理的 Vue.js 项目需要展示一个二维码，记录一下采用的实现方法。
关于 qrcodejs2 的更多信息请参考官方文档。

安装 qrcodejs2

说是在 Vue.js 中直接使用 qrcode 包会有错误，没试过。
另外还有个 vue-qr 的包，可自定义性更高，不过在项目中安装失败了，就没再尝试。

bash

npm i qrcodejs2

使用步骤

导入 QRCode
javascript
```
import QRCode from 'qrcodejs2'
```
1
添加页面控件
html
```
<div class="qrcode" ref="qrCode"></div>
```
1

创建 QRCode

javascript

this.qrCode = new QRCode(this.$refs.qrCode, {
    text: 'https://www.liujiajia.me',
    width: 200,
    height: 200,
    colorDark: '#409eff',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H,
})

清除 QRCode
这种方式清除的是 canvas 标签中的内容，页面展示的二维码图片仍然存在。
如需隐藏，可以配合 v-show 来控制其展示。
javascript
```
this.qrCode.clear()
```
1
这种方式会清除 canvas 和对应的图片，但是再次调用 makeCode 方法时不会再创建二维码。
javascript
```
this.$refs.qrCode.innerHTML = '';
```
1
刷新 QRCode
可以调用 makeCode 方法更新二维码的内容。
javascript
```
this.qrCode.makeCode("https://www.liujiajia.me/blog/")
```
1