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=" ...
随机推荐
- Nginx 虚拟主机中配置 server_name ⼀个server块中配置多个站点 ⼀个站点配置多个⼆级域名
⼀个server块中配置多个站点 server { listen 80; server_name ~^(www.)?(.+)$; index index.php index.html; root /h ...
- C# 查看变量的内存占用和分布
在程序的调试过程中,有时候我们想知道变量在内存中的具体占用状况,这样方便我们调试程序,以便于追踪变量的变化过程 这就需要查看变量的内存占用. 1.如何进入内存查看? 2.如何查看变量? 查看变量,需要 ...
- 利用shell脚本来监控linux系统的负载与CPU占用情况
一.安装linux下面的一个邮件客户端msmtp软件(类似于一个foxmail的工具) 1.下载安装: http://downloads.sourceforge.net/msmtp/msmtp-1.4 ...
- python 给视频加入音频
1.先去查查 ffmpeg 这个东西 贼强 # 附上大佬博客 https://blog.csdn.net/qq_39752726/article/details/ 104263381?utm ...
- DSP(数字信号处理)与监控摄像机相关技术解读
提起安防领域,我们第一个想到的应该就是监控摄像机了,它对于安防的重要性,就像人的眼睛对于人的作用一样,是重要的信息获取来源. 监控摄像机广泛应用于学校.公司.银行.交通.平安城市等多个安保领域. 广州 ...
- docker简单实战
1.为ubuntu镜像添加ssh服务 1.1查看可用的ubuntu版本 1)访问ubuntu镜像库地址:https://hub.docker.com/search?q=ubuntu&type= ...
- SPI主机Verilog代码实现
前面已经提到过了SPI,在SPI从机的设计中已经讲过SPI的基本原理,这里就不再赘述.对于SPI的主机可以参考百度百科或则笔者前面写的SPI从机介绍的相关知识. 下面是SPI_master的代码 SP ...
- tensorflow-gpu安装遇到的坑
tensorflow-gpu安装好导入,一直出现以下错误 折腾了好久. 错误之前也按照中国官网安装及配置各环境变量:https://tensorflow.google.cn/install/gpu 其 ...
- docker systemctl start报错: Failed to get D-Bus connection: Operation not permitted
转载自:https://blog.csdn.net/zhenliang8/article/details/78330658 最近使用docker部署ansible,安装ssh 遇到启动服务报错:Fai ...
- Linux FTP服务器配置文件vsftpd.conf 配置
配置文件/etc/vsftpd/vsftpd.conf local_enable=YES write_enable=YESlocal_umask=022dirmessage_en ...