Vue中生成二维码组件——vue-qr——插件市场

news2024/11/20 4:47:47

最近在重构一个老系统,老系统用的是vue+elementUi的框架,现在要更新为vue+antdesign的框架模式。

下面记录一下用到的插件:

在这里插入图片描述

1.Vue中生成二维码组件——vue-qr

vue-qr官网链接:https://www.npmjs.com/package/vue-qr

1.1 安装vue-qr

npm install vue-qr --save

1.2 在页面上引入

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {vueQr}
}

1.3 页面上使用

<vue-qr :text="pcbaUrl" :size="200" style="display: block; margin: auto"></vue-qr>

1.4 配置参数介绍

属性名含义
text编码内容
correctLevel容错级别
size尺寸,长宽一致,包含外边距
margin二维码图像的外边距,默认20px
colorDark实点的颜色
colorLight空白区的颜色
bgSrc欲嵌入的背景图地址
gifBgSrc欲嵌入的背景图gif地址,设置后普通的背景图将失效,设置此选项会影响性能
backgroundColor背景色
backgroundDimming叠加在背景图上的颜色,在解码有难度的时候有一定帮助
logoSrc嵌入至二维码中心的LOGO地址
logoScale用于计算LOGO大小的值,过大将导致解码失败,LOGO尺寸计算公式logoScale*(size-2*margin),默认0.2
logoMarginLOGO标识周围的空白边框,默认为0
logoBackgroundColorLOGO背景色,需要设置logo margin
logoCornerRadiusLOGO标识及其边框的圆角半径,默认为0
whiteMargin若设为true,背景图外将绘制白色边框
dotSize数据区域点缩小比例,默认为0.35
autoColor若为true,图像将被二值化处理,未指定阈值则使用默认值
binarizeThreshold(0<threshold<255)二值化处理的阈值
callback生成的二维码DataURI可以在回调中取得,第一个参数为二维码dataURL,第二个参数为props传过来的qid(因为二维码生成是异步的,所以加个id用于排序)
bindElement指定是否需要自动将生成的二维码绑定到html,默认是true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/454723.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Simulation Extractable Versions of Groth’s zk-SNARK Revisited学习笔记

1. 引言 等人2020年论文《Simulation Extractable Versions of Groth’s zk-SNARK Revisited》&#xff0c;开源代码实现见&#xff1a; https://github.com/Baghery/ABPR22&#xff08;Rust&#xff0c;基于arkworks开发。使用了Multi-Scalar Multiplication (MSM)技术来优化…

json模块和pickle模块

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 json和pickle模块 json模块序列化与反序列化json模块中的方法 pickle模块 专栏&#xff1a;《python从…

IT运维:Windows常用的命令行客户端

对于IT运维人员来说&#xff0c;和命令打交道是必不可少的事情&#xff0c;拥有一个好用的CMD命令行工具&#xff0c;对提升效率是非常有必要的&#xff0c;今天给大家分享Windows常用的命令行客户端&#xff0c;希望对大家能有所帮助&#xff01; 1、PowerShell PowerShell是W…

4月21日作业

#include <iostream> #include <cstring> using namespace std; //定义类 class myString { private: char *str; int size; public: //无参构造 myString():size(32) { str new char[size]; strcpy(str,""); cout << "无参构造&qu…

Windows Server 2012 R2 部署.net6网站

之前部署在Windows Server 2016上很正常没有什么问题 但是在2012 R2上部署失败&#xff08;503&#xff09;&#xff0c;网上搜查后&#xff0c;发现要按照下面的顺序配置服务器 安装Windows操作系统布丁 Download Windows Server 2012 R2 更新 (KB2919355) from Official M…

搭建Serv-U FTP服务器共享文件并外网远程访问「无公网IP」

文章目录 1. 前言2. 本地FTP搭建2.1 Serv-U下载和安装2.2 Serv-U共享网页测试2.3 Cpolar下载和安装 3. 本地FTP发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 转载自内网穿透工具的文章&#xff1a;使用Serv-U搭建FTP服务器并公网访问【内网穿透】 1. 前言…

pycharml利用ddddocr和selenium识别验证码并登录

文章目录 1OCR2 ddddocr3使用案例4 常见问题代码详情获得XPATH方法 1OCR OCR (Optical Character Recognition&#xff0c;光学字符识别)&#xff0c;是指电子设备(例如扫描仪或 数码相机)检查纸上打印的字符&#xff0c;通过检测暗、亮的模式确定其形状&#xff0c;然后用字符…

Excel数据分列的详细用法

Excel数据分列的详细用法 数据分列常见功能有日期格式的转换&#xff0c;有规律的数据分列&#xff0c;固定宽度的数据分列&#xff0c;读书屋办公教程网这篇文章将详细讲解Excel快速填充及文本与数值的互换。 软件演示版本&#xff1a;Microsoft Excel2019 快速填充 如下图表…

Dialect及Operation详解

参考资料&#xff1a; [MLIR] Dialect及Operation详解 - 知乎 (zhihu.com) 2. Dialect 及Operation 2.1Dialect 2.1.1Dialect 是什么&#xff1f; 从源程序到目标程序&#xff0c;要经过一系列的抽象以及分析&#xff0c;通过 Lowering Pass 来实现从一个IR到另一个IR的转换。…

力扣刷题——双数之和

很多人去力扣刷题都是数组的第一题&#xff0c;也就是双数之和&#xff0c;相信这也是很多人劝退题目&#xff0c;甚至对自己学过的知识产生了怀疑&#xff0c;这真的是我学完C语言&#xff0c;Java&#xff0c;Python或C之后能做出来的题目吗&#xff1f;直接劝退了很多人&…

使用 Lombok 的 @Accessors(chain=true) 的注意事项

前言 大家在日常开发中想必都有使用过 Lombok 的 Accessors(chaintrue) 注解吧&#xff0c;这个确实有时候会让我们的get/set方法变的非常的便捷&#xff0c;但是从中又隐藏了一些注意细节&#xff0c;我们一起来看看。 注解介绍 Accessors(chaintrue) 在我们的实体类或者对…

curl检测网页的用法

一般网页状态为200都是正常的&#xff0c;还有一种情况是网页做了跳转&#xff0c;这种情况下网页状态码为301&#xff0c;http的head里会有lcation记录跳转的地址 这个方法不太好用&#xff0c;取出来的值后面会带回车键值可以将值输出到文本里就会看到末尾有带回车键值&…

solidworks2022 - 双开

文章目录 solidworks2022 - 双开概述实验END solidworks2022 - 双开 概述 如果要参照一份设计文件, 画自己的设计. solidworks双开就有点刚需的意思了. 如果只是双击打开参考设计和自己的现有工程, 只能在一个solidworks中同时打开2份工程. 虽然可以跨区显示, 但是一份设计进…

Git很少用到但是很有用的几个命令

Git的有些命令已经融入到血液中&#xff0c;通常情况下大脑可能还没有想出来&#xff0c;键盘却已经敲出来了。 但是同样有一些Git命令&#xff0c;平时用不上&#xff0c;但真正遇到了使用场景时&#xff0c;却怎么也想不起来&#xff0c;不得不面向CSDN编程。 比如有时候git …

推荐 | 基于飞凌嵌入式i.MX8MM核心板的压力位移分析仪应用方案

来源&#xff1a;飞凌嵌入式官网 www.forlinx.com 随着工业制造领域的高速发展&#xff0c;工业生产中对于材料力学性能的要求也随之上升&#xff0c;因此就需要有更加精确和可靠的测量仪器来满足需求。于是压力位移分析仪应运而生&#xff0c;大大提高了材料测试的准确性…

【荐书】分享5种程序员需要的战略思维

⭐️ 大家好&#xff0c;我是爱读书的小雨青年。我很高兴参加了周掌柜《战略思维十二讲》的线下新书发布会。 ⭐️ 新书发布会分为两个部分&#xff0c;上半场是周掌柜本人的自我介绍&#xff0c;以及对本书的一些讲解。在我看来讲解程度十分细致了&#xff0c;周掌柜本人给人一…

[世界读书日] 最好的书,都在博雅之中

今天是世界读书日&#xff08;4月23日&#xff09;&#xff0c;还是谈谈读书。 我很少看到有人说读书不好的&#xff0c;但很少看到有人爱读书&#xff0c;也很少看到有人读到了好书。 好书、好读书、读好书&#xff0c;都是很稀缺的。 一、好书的作用 基本上&#xff0c;我们遇…

项目管理中,如何拒绝客户的要求?

在生活中&#xff0c;我们要面对各种各样的人和事&#xff0c;要学如何去拒绝别人提出的要求。 这些要求&#xff0c;有符合我们意愿的&#xff0c;也有不符合我们意愿的&#xff1b;有我们能接受的&#xff0c;也有我们需要拒绝的。 这是我们日常生活的一部分&#xff0c;并…

IJKPLAYER源码分析-主要队列

前言 对IJKPLAYER播放器内核几个关键的队列的理解&#xff0c;将有助于掌控全局。因此&#xff0c;这里简要介绍所涉及到的几个关键队列实现&#xff1a; PacketQueue&#xff1a;压缩数据队列&#xff0c;是一个带有首尾指针和回收单链表头指针的单链表结构&#xff0c;用来实…

iptables和firewalld防火墙

安全技术和防火墙概述 安全技术 入侵检测系统&#xff08;Intrusion Detection Systems&#xff09;&#xff1a;特点是不阻断任何网络访问&#xff0c;量化、定位来自内外网络的威胁情况&#xff0c;主要以提供报警和事后监督为主&#xff0c;提供有针对性的指导措施和安全决…