【Vue.js】生成二维码

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

## 安装 *qrcodejs2*

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

```bash
npm i qrcodejs2
```

## 使用步骤

1.  导入 *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,
    })
    ```

1.  清除QRCode

这种方式清除的是 *canvas* 标签中的内容，页面展示的二维码图片仍然存在。
    如需隐藏，可以配合 `v-show` 来控制其展示。

```javascript
    this.qrCode.clear()
    ```

这种方式会清除 *canvas* 和 对应的图片，但是再次调用 `makeCode` 方法时不会再创建二维码。

```javascript
    this.$refs.qrCode.innerHTML = '';
    ```

1.  刷新QRCode

可以调用 *makeCode* 方法更新二维码的内容。

```javascript
    this.qrCode.makeCode("https://www.liujiajia.me/blog/")
    ```

[1]:https://www.npmjs.com/package/qrcodejs2 (qrcodejs2)
[2]:https://www.npmjs.com/package/vue-qr (vue-qr)

← 上一篇

【Vue.js】生成二维码

目录

关联博客