使用 qrcodejs2 生成二维码详细API和参数
使用 qrcodejs2 生成二维码
安装 qrcodejs2
cnpm install qrcodejs2 --save
使用 qrcodejs2
页面引入
import QRCode from 'qrcodejs2'
页面标签
<div id="qrcode" ref="qrcode"></div>
可以使⽤ 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 的浏览器下有效) |
资源
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfhkjeg
系列文章
更多
同类精品
更多
-
el-table 表头加粗
-
iframe 页面间的通信()
-
babel报错ERROR in ./src/index.jsModule build failed (from ./node_modules/happypack/loader.js):
-
Refused to apply style from * because its MIME type (‘text/html‘) is not a supported stylesheet 原因
-
vbenAdmin切换表头以和数据的记录
-
WASubContext.js?t=wechat和amp;srouteDone with a webviewId 26 that is not the current
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01