使用 qrcodejs2 生成二维码
安装 qrcodejs2
cnpm install qrcodejs2 --save使用 qrcodejs2
页面引入
import QRCode from 'qrcodejs2'页面标签
可以使⽤ id 或者 ref，建议使⽤ ref，因为使⽤ vue 框架控制虚拟 Dom 才是正确的选择简单⽅便
createQRcode(WIDTH, id, text) { // 重复创建二维码会，之前的二维码还在，新创建的会被接在下面 // 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题 if(this.$refs.qrcode) this.$refs.qrcode.innerHTML = "" let long = document.documentElement.clientWidth * (WIDTH / 375) new QRCode(id, { width: long, height: long, text: text, correctLevel : QRCode.CorrectLevel.L }); // correctLevel 容错级别，可设置为： // QRCode.CorrectLevel.L // QRCode.CorrectLevel.M // QRCode.CorrectLevel.Q // QRCode.CorrectLevel.H // L - M - Q - H 码密度越来越高，默认不设置是用 H }, // this.createQRcode(132, `qrcode`, `${this.DOMAIN}`);参数说明
new QRCode(element, option)| 名称 | 默认值 | 说明 |
|---|---|---|
| element | – | 显示二维码的元素或该元素的 ID |
| option | 参数配置 |
Options
| 名称 | 默认值 | 说明 |
|---|---|---|
| width | 256 | 图像宽度 |
| height | 256 | 图像高度 |
| typeNumber | 4 | |
| colorDark | “#000000” | 前景色 |
| colorLight | “#ffffff” | 背景色 |
| correctLevel | QRCode.CorrectLevel.L |
容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H 从上至下生成码密度越来越高 L – M – Q – H |
Events
| 名称 | 说明 |
|---|---|
| makeCode(text) | 设置二维码内容 |
| clear() | 清除二维码。（仅在不支持 Canvas 的浏览器下有效） |
资源
https://www.npmjs.com/package/qrcodejs2版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/224944.html原文链接：https://javaforall.net
