qrcode插件-生成二维码

安装

yarn add qrcodejs2 --save 
npm install qrcodejs2 --save 

使用

<template><div><div id="qrcodeImg"></div><!-- 创建一个div,并设置id --></div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default{mounted() {new QRCode('qrcodeImg', {width:160,height:160,text: this.$store.state.userForm.userInf.member_num, // 二维码内容});}
}
</script>
  • 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)

  • clear():二维码清除方法

注意:如果将生成二维码逻辑放到弹窗中,那么二维码在生成时弹窗元素还未完全渲染,此时会找不到渲染对象而生成失败,这种情况可以使用$nextTick()函数将二维码生成代码放到$nextTick()的回调函数里来解决。

this.$nextTick(() => {new QRCode('qrcodeImg', {width:160,height:160,text: this.$store.state.userForm.userInf.member_num, // 二维码内容});
})

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

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

相关文章

Sequelize一个易用且基于 promise 的 Node.js ORM 工具

Sequelize中文文档|Sequelize中文网 Sequelize 是一个易用且基于 promise 的 Node.js ORM 工具 适用于 Postgres, MySQL, MariaDB, SQLite, DB2, Microsoft SQL Server, Snowflake, Oracle DB 和 Db2 for IBM i. 它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功…

洛谷刷题 | P1706 全排列问题

全排列问题 题目描述 按照字典序输出自然数 1 1 1 到 n n n 所有不重复的排列&#xff0c;即 n n n 的全排列&#xff0c;要求所产生的任一数字序列中不允许出现重复的数字。 输入格式 一个整数 n n n。 输出格式 由 1 ∼ n 1 \sim n 1∼n 组成的所有不重复的数字序…

Web3创作整理 - 2024-02-23 ~ 2024-03-25

Web3 创作整理 - 2024-02-23 ~ 2024-03-25 整理下3月份的文章&#xff0c;方便大家阅读 分类文章地址&#x1fad1;ETH什么是Dapp&#x1f3bc;ETH什么是以太坊&#x1f3b5;ETH如何才能拥有ETH&#x1f3b6;ETHBTC网络 vs ETH网络&#x1f399;️ETHETH网络中的区块链&#x1…

利用Python和IP技术实现智能旅游情报系统

文章目录 引言一、系统架构设计1. 数据采集模块2. 数据处理模块3. 用户界面模块 二、数据获取技术应用三、系统功能展示四、亮数据采集工具介绍五、总结六、号外 引言 随着旅游行业的不断发展&#xff0c;人们对旅游信息的需求也越来越大。为了帮助旅行者更好地规划行程&#…

Nodejs沙盒逃逸

Buffer 在较早一点的node.js版本中 (8.0 之前)&#xff0c;当 Buffer 的构造函数传入数字时, 会得到与数字长度一致的一个 Buffer&#xff0c;并且这个 Buffer 是未清零的。8.0 之后的版本可以通过另一个函数 Buffer.allocUnsafe(size) 来获得未清空的内存。 注&#xff1a;关…

P1219八皇后 (典DFS)

注意&#xff1a; 数组大小要开够&#xff0c;数据范围是6到13&#xff0c;要开到20&#xff0c;不然开到15数据点没法全部过。 代码&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue>using namespace std;i…

Rocket mq

搭建服务【有2个】 一个是NameServer还有一个是Broker&#xff0c;要两个服务协同 后台启动服务 允许服务端自己创建topic&#xff0c;如果客户端传来的topic没有的话 然后搞个rocket mq的仪表盘&#xff0c;application.yml改成自己的地址【只需要指定NameServer的地址&#…

更灵活的定位内存地址的方法

文章目录 更灵活的定位内存地址的方法and和or指令关于ASCII码以字符形式给出的数据大小写转换的问题[bxidata]用[bxidata]的方式进行数组的处理SI和DI[bxsi]和[bxdi][bxsiidata]和[bxdiidata]不同的寻址方式的灵活应用题目示例 更灵活的定位内存地址的方法 and和or指令 1&…

Axure RP 8中文---快速原型设计工具,一站式解决方案

Axure RP 8是一款专业的快速原型设计工具&#xff0c;以其直观易用的界面和丰富的功能受到广大用户的青睐。它支持用户通过拖放操作快速创建交互式原型&#xff0c;包括线框图、流程图等&#xff0c;并具备高保真度的设计能力。Axure RP 8还提供了团队协作和共享功能&#xff0…

【Java程序设计】【C00368】基于(JavaWeb)Springboot的箱包存储系统(有论文)

TOC 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客中有上百套程序可供参考&#xff0c;欢迎共同交流学习。 项目简介 项目获取 &#x1f345;文末点击卡片…

基于nodejs+vue铁路订票管理系统python-flask-django-php

该铁路订票管理系统采用前后端分离进行设计&#xff0c;并采用nodejs语言以及express框架进行开发。本系统主要设计并完成了用户登录管理过程、个人信息修改、用户管理、火车类型管理、火车信息管理、车票预订管理、车票退票管理、系统管理等功能。该系统操作简单&#xff0c;界…

【React】使用 JSX 为 JavaScript 添加标签

使用 JSX 为 JavaScript 添加标签实际上是将 JSX 语法与 JavaScript 代码结合使用&#xff0c;以描述用户界面。JSX 允许你在 JavaScript 中编写类似 HTML 的结构&#xff0c;并最终由 React 库将其转换为真正的 DOM 元素。以下是将标签引入 JavaScript 以及将 HTML 转化为 JSX…

13_Linux内核配置选项

内核配置选项 内核配置通常是对内核支持的各个功能进行取舍配置&#xff0c;将配置的方案保存到 configure文件中。在编译内核的时候&#xff0c;就会根据此配置对内核进行取舍编译。 编译内核之前要先配置。为了正确、合理地设置内核编译配置选项&#xff0c;从而只编译系统需…

BM85 验证IP地址(字符串)

import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 验证IP地址* param IP string字符串 一个IP地址字符串* return string字符串*/public boolean isIPv4(String IP){//没有.i…

Redis命令集redis实战案例

作为资深研发专家&#xff0c;对Redis命令集以及实战案例有深入的了解。下面&#xff0c;我将详细介绍Redis的命令集&#xff0c;并结合实际案例来展示Redis的应用。 Redis命令集非常丰富&#xff0c;涵盖了数据操作、持久化、事务处理等多个方面。以下是一些常用的Redis命令&…

单片机入门到精通:一站式在线学习平台!

介绍&#xff1a;单片机&#xff0c;也称为微控制器&#xff08;MCU&#xff09;&#xff0c;是一种集成了中央处理器&#xff08;CPU&#xff09;、随机存储器&#xff08;RAM&#xff09;、只读存储器&#xff08;ROM&#xff09;以及输入/输出接口于单一芯片上的微型计算机。…

11.测试教程-自动化测试selenium-3

文章目录 1.unittest框架解析2.批量执行脚本2.1构建测试套件2.2用例的执行顺序2.3忽略用例执行 3.unittest断言4.HTML报告生成5.异常捕捉与错误截图6.数据驱动 大家好&#xff0c;我是晓星航。今天为大家带来的是 自动化测试selenium第三节 相关的讲解&#xff01;&#x1f600…

ADB/ADB shell

ADB&#xff08;Android Debug Bridge&#xff09;是Android开发工具包&#xff08;Android SDK&#xff09;的一部分&#xff0c;是一个命令行工具&#xff0c;它充当电脑与Android设备之间的桥梁&#xff0c;提供多种功能&#xff0c;主要包括&#xff1a; 0. 使用 adb shel…

使用SpringAOP+Caffeine实现本地缓存

文章目录 一、背景二、实现1、定义注解2、切面3、缓存工具类 三、测试 一、背景 公司想对一些不经常变动的数据做一些本地缓存&#xff0c;我们使用AOPCaffeine来实现 二、实现 1、定义注解 import java.lang.annotation.ElementType; import java.lang.annotation.Retenti…

【LAMMPS学习】五、LAMMPS命令(3) 输入脚本结构

5. 命令 本部分描述了 LAMMPS 输入脚本的格式以及其中的命令如何用于定义 LAMMPS 模拟。主要包括以下内容。 5.1. LAMMPS 输入脚本 5.2.输入脚本的解析规则 5.3.输入脚本结构 本部分描述了典型的 LAMMPS 输入脚本的结构。 LAMMPS 发行版中的示例目录包含许多示例输入脚本…