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. Nginx 虚拟主机中配置 server_name ⼀个server块中配置多个站点 ⼀个站点配置多个⼆级域名

    ⼀个server块中配置多个站点 server { listen 80; server_name ~^(www.)?(.+)$; index index.php index.html; root /h ...

  2. C# 查看变量的内存占用和分布

    在程序的调试过程中,有时候我们想知道变量在内存中的具体占用状况,这样方便我们调试程序,以便于追踪变量的变化过程 这就需要查看变量的内存占用. 1.如何进入内存查看? 2.如何查看变量? 查看变量,需要 ...

  3. 利用shell脚本来监控linux系统的负载与CPU占用情况

    一.安装linux下面的一个邮件客户端msmtp软件(类似于一个foxmail的工具) 1.下载安装: http://downloads.sourceforge.net/msmtp/msmtp-1.4 ...

  4. python 给视频加入音频

    1.先去查查  ffmpeg 这个东西   贼强 # 附上大佬博客   https://blog.csdn.net/qq_39752726/article/details/ 104263381?utm ...

  5. DSP(数字信号处理)与监控摄像机相关技术解读

    提起安防领域,我们第一个想到的应该就是监控摄像机了,它对于安防的重要性,就像人的眼睛对于人的作用一样,是重要的信息获取来源. 监控摄像机广泛应用于学校.公司.银行.交通.平安城市等多个安保领域. 广州 ...

  6. docker简单实战

    1.为ubuntu镜像添加ssh服务 1.1查看可用的ubuntu版本 1)访问ubuntu镜像库地址:https://hub.docker.com/search?q=ubuntu&type= ...

  7. SPI主机Verilog代码实现

    前面已经提到过了SPI,在SPI从机的设计中已经讲过SPI的基本原理,这里就不再赘述.对于SPI的主机可以参考百度百科或则笔者前面写的SPI从机介绍的相关知识. 下面是SPI_master的代码 SP ...

  8. tensorflow-gpu安装遇到的坑

    tensorflow-gpu安装好导入,一直出现以下错误 折腾了好久. 错误之前也按照中国官网安装及配置各环境变量:https://tensorflow.google.cn/install/gpu 其 ...

  9. docker systemctl start报错: Failed to get D-Bus connection: Operation not permitted

    转载自:https://blog.csdn.net/zhenliang8/article/details/78330658 最近使用docker部署ansible,安装ssh 遇到启动服务报错:Fai ...

  10. Linux FTP服务器配置文件vsftpd.conf 配置

    配置文件/etc/vsftpd/vsftpd.conf local_enable=YES            write_enable=YESlocal_umask=022dirmessage_en ...