<!-- # 【Vue.js】生成二维码 --> <!-- vuejs-qrcode --> 后台管理的 *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) Loading... 版权声明:本文为博主「佳佳」的原创文章,遵循 CC 4.0 BY-NC-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://www.liujiajia.me/2021/12/22/vuejs-qrcode ← 上一篇 下一篇 → 提交