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更新之后再执行代码。

vue3 生成二维码 qrcodejs2-fix的更多相关文章

  1. vue项目使用qrcodejs2生成二维码

    最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用   1. 安装包 cnpm i qrcodejs ...

  2. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  3. VUE 生成二维码(qrcodejs)

    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...

  4. VUE使用QRcode或者vue-qr生成二维码

    这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...

  5. vue2.0生成二维码图片并且下载图片到本地兼容写法

    vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...

  6. VUE 生成二维码插件

    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...

  7. Vue——前端生成二维码

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...

  8. vue 生成二维码+截图

    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...

  9. Javascript生成二维码(QR)

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  10. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

随机推荐

  1. react框架-知识点(ref,, setState)

    react的思想:无必要勿增实体 1. ref 使用 myRef = React.createRef() <input ref={this.myRef}></input> 2. ...

  2. 人眼对led灯的闪烁识别度:写单片机的时候,小于15ms,我们人眼视为常亮

    人眼对于每11毫秒闪烁一次约83赫兹基本感觉不到,每15毫秒闪烁一次约66赫兹轻微频闪. 所以写单片机的时候,小于15ms,我们人眼视为常亮

  3. 升级版本后,报错go: -i flag is deprecated

    环境 go version go1.18.6 升级go版本后,本地项目起不来 将-i去掉 应用,在重启,则正常启动

  4. Windows10使用WSL(Windows Subsystem for Linux)

    官方页面地址:https://docs.microsoft.com/zh-cn/windows/wsl/ 查看WSL的IP地址:ip addr | grep eth0 下面是一个示例 PowerShe ...

  5. 在百度云服务器上部署Django网站的经历

    前言: 前段时间,利用Django为单位制作了一个小型的内部考勤系统,本想放到单位内部的服务器上,考虑到运行的稳定.安全防护等问题,最终决定把网站部署到百度云服务器上,事先也在网上查找了一些资料,但过 ...

  6. kafka删除topic清空数据

    一般情况下,是不会删除数据的.到达一定时间后,kafka会自动删除.如果一定要删除可以删除topic在重建topic了 No. 1: 如果需要被删除topic 此时正在被程序 produce和cons ...

  7. ES6-新增方法

    一.字符串的新增方法 1.includes方法(实例的方法): 应用: 代码优化: (1)先使用includes方法判断是url中否包含? (2)如果包含?, 再判断url最后一位字符是不是?或&am ...

  8. [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')

    相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把  <head />  ...

  9. [部署日记]Android Studio在同步Gradle的时候提示Could not resolve com.android.tools.build:gradle:7.0.4

    一波未平一波又起,好家伙直呼好家伙. 问题来源: 在想好APP起什么名字,放哪里后,打开模拟器准备着手处理时发现, Gradle sync出问题了... "Build"窗口提示: ...

  10. 关于 dangerouslySetInnerHTML

    之前不太了解react,第一次看dangerouslySetInnerHTML,以为可以用来防止xss注入. 后面看待又补充了一个DOMPurify,才知道这个东西只有一个提醒的作用,并不能防止xss ...