vue3 生成二维码 qrcodejs2-fix
2024-10-21 20:27:55
1、安装qrcodejs2-fix
npm install qrcodejs2-fix
2、引入qrcodejs2-fix
import QRCode from 'qrcodejs2-fix';
3、在页面中定义容器
<div id="code"></div>
4、定义生成二维码的函数
const getCode = () => {
document.getElementById("code").innerHTML = ""; //清空标签内原有数据,防止多次点击生成多个二维码
new QRCode(document.getElementById("code"), {
text: '000000'
});
};
5、调用函数
<a-button @click="getCode">点击获取二维码</a-button>
QRCode参数说明
参数 | 说明 | 默认值 |
---|---|---|
text | 需要编码的文字内容 | - |
width | 图像宽度 | 256 |
height | 图像高度 | 256 |
colorDark | 前景色 | #000000 |
colorLight | 背景色 | #ffffff |
correctLevel | 容错级别,可设置为:QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H | QRCode.CorrectLevel.L |
typeNumber | 二维码类型(1~40,输入 0 以自动检测) | 4 |
注:在dialog弹窗里生成二维码第一次点击时 dialogFormVisible.value=false,二维码生成时会找不到对象可以用nextTick()函数
将二维码生成代码放到nextTick()函数里
//this.$nextTick()
nextTick(()=>{
document.getElementById("qr").innerHTML = '';
new QRCode('qr', {
text: formData.value.pbid,
width: 50,
height: 50,
colorDark: '#000000', //二维码颜色
colorLight: "#ffffff" //背景颜色
}); });
vue.js中this.$nextTick()就是起到了一个等待数据的作用,等到DOM更新之后再执行代码。
最新文章
- [数据分析]excel带名称的四象限散点图制作
- 如何在Mac OSX系统下安装Tomcat
- POJ 2631 DFS+带权无向图最长路径
- teamviewer现在无法捕捉屏幕,这可能是由于快速的用户切换或远程桌面会话已经断开
- JEditorPane中html文档中文乱码解决
- cakephp , the subquery
- Redis基础学习(二)&mdash;数据类型
- Screen命令安装使用教程
- Java Socket:Java-NIO-ServerSocketChannel
- 学习用Node.js和Elasticsearch构建搜索引擎(7):零停机时间更新索引配置或迁移索引
- groovy.lang.GroovyRuntimeException: Conflicting module versions
- HTTP协议之Transfer-Encoding
- http与https区别
- css相关知识点
- 网站首页多URL可访问,如何集中首页网站权重?
- 用10分钟,搭建图像处理编程环境,0失败!(python语言,windows系统)
- 20145122《Java程序设计》第九周学习总结
- 使用php的mysqli扩展库操作mysql数据库
- vue打包静态资源路径不正确的解决办法
- Javascript原型与对象等知识