vue3 生成二维码 qrcodejs2-fix
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()函数
//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更新之后再执行代码。
vue3 生成二维码 qrcodejs2-fix的更多相关文章
- vue项目使用qrcodejs2生成二维码
最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs ...
- jquery.qrcode.min.js生成二维码 通过前端实现二维码生成
主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- VUE使用QRcode或者vue-qr生成二维码
这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...
- vue2.0生成二维码图片并且下载图片到本地兼容写法
vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...
- VUE 生成二维码插件
原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...
- Vue——前端生成二维码
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...
- vue 生成二维码+截图
链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- 使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...
随机推荐
- react框架-知识点(ref,, setState)
react的思想:无必要勿增实体 1. ref 使用 myRef = React.createRef() <input ref={this.myRef}></input> 2. ...
- 人眼对led灯的闪烁识别度:写单片机的时候,小于15ms,我们人眼视为常亮
人眼对于每11毫秒闪烁一次约83赫兹基本感觉不到,每15毫秒闪烁一次约66赫兹轻微频闪. 所以写单片机的时候,小于15ms,我们人眼视为常亮
- 升级版本后,报错go: -i flag is deprecated
环境 go version go1.18.6 升级go版本后,本地项目起不来 将-i去掉 应用,在重启,则正常启动
- Windows10使用WSL(Windows Subsystem for Linux)
官方页面地址:https://docs.microsoft.com/zh-cn/windows/wsl/ 查看WSL的IP地址:ip addr | grep eth0 下面是一个示例 PowerShe ...
- 在百度云服务器上部署Django网站的经历
前言: 前段时间,利用Django为单位制作了一个小型的内部考勤系统,本想放到单位内部的服务器上,考虑到运行的稳定.安全防护等问题,最终决定把网站部署到百度云服务器上,事先也在网上查找了一些资料,但过 ...
- kafka删除topic清空数据
一般情况下,是不会删除数据的.到达一定时间后,kafka会自动删除.如果一定要删除可以删除topic在重建topic了 No. 1: 如果需要被删除topic 此时正在被程序 produce和cons ...
- ES6-新增方法
一.字符串的新增方法 1.includes方法(实例的方法): 应用: 代码优化: (1)先使用includes方法判断是url中否包含? (2)如果包含?, 再判断url最后一位字符是不是?或&am ...
- [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')
相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把 <head /> ...
- [部署日记]Android Studio在同步Gradle的时候提示Could not resolve com.android.tools.build:gradle:7.0.4
一波未平一波又起,好家伙直呼好家伙. 问题来源: 在想好APP起什么名字,放哪里后,打开模拟器准备着手处理时发现, Gradle sync出问题了... "Build"窗口提示: ...
- 关于 dangerouslySetInnerHTML
之前不太了解react,第一次看dangerouslySetInnerHTML,以为可以用来防止xss注入. 后面看待又补充了一个DOMPurify,才知道这个东西只有一个提醒的作用,并不能防止xss ...