vue-生成二维码

安装

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/759059.shtml

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

相关文章

设计模式之简单工厂模式详解

简单工厂模式 工厂模式&#xff1a;工厂方法模式&#xff1b; 低阶&#xff1a;简单工厂模式&#xff1b; 高阶&#xff1a;抽象工厂模式&#xff1b; 1&#xff09;概述 定义一个工厂类&#xff0c;根据参数的不同返回不同类的实例&#xff0c;被创建的实例通常都具有共同…

Linux快速入门,上手开发 01.学习路线

少时曾许凌云志&#xff0c;当取世间第一流 再见少年拉满弓&#xff0c;不惧岁月不飓风 —— 24.3.20 1.Linux的发展历史 2.VM虚拟机的Linux初体验 3.图形化页面设置系统——快速上手 4.命令行操作——向专业前进 5.核心操作命令——必知必会&#xff08;管理企业级权限/定位b…

打印租赁行业现状与未来发展趋势分析

办公设备租赁行业现状与未来发展趋势分析 1. 简介 办公设备租赁行业是近年来快速发展的行业之一&#xff0c;随着数字化办公的普及和企业成本控制的需求增加&#xff0c;办公设备租赁市场呈现出了蓬勃的发展态势。本报告将对办公设备租赁行业的现状、发展历程以及未来发展趋势…

如何从零开始拆解uni-app开发的vue项目(二)

昨天书写了一篇如何从零开始uni-app开发的vue项目,今天准备写一篇处理界面元素动态加载的案例: 背景:有不同类别的设备,每个设备有每日检查项目、每周检查项目、每年检查项目,需要维保人员,根据不同设备和检查类别对检查项目进行处理,提交数据。 首先看一下界面: &l…

C++学习之旅(二)运行四个小项目 (Ubuntu使用Vscode)

如果是c语言学的比较好的同学 可以直接跟着代码敲一遍&#xff0c;代码附有详细语法介绍&#xff0c;不可错过 一&#xff0c;猜数字游戏 #include <iostream> #include <cstdlib> #include <ctime>int main() {srand(static_cast<unsigned int>(tim…

(一)基于IDEA的JAVA基础3

通过之前的内容&#xff0c;我们在建好的文件夹下建一个java文件&#xff0c;我们来在IDEA中写一下之前用记事本写的helloworld&#xff0c;我们先看一下java代码的规范: 1.java程序文件名一定要有意义&#xff0c;首字母一定要大写。 2.class后面的名字:由大小写字母&#x…

蓝队面试场景题,面试经验小记

答案不一定稳对&#xff0c;自己和别人讨论加查资料的。说话语速慢点&#xff0c;遇见不知道的就说没遇见过这种情况&#xff0c;但是遇见过类似情况举例子上报给高级人员&#xff08;有思路说思路&#xff09;。不知道的话统一说先隔离开&#xff0c;上杀毒软件&#xff0c;然…

Python字典的基本用法

Python字典是一种可变容器模型&#xff0c;能够存储任意类型对象&#xff0c;如字符串、数字、元组等。字典的每个键值对用冒号:分割&#xff0c;每个对之间用逗号,分割&#xff0c;整个字典包括在花括号{}中。这使得字典成为非常快速且易于使用的数据结构。 字典的特点 键的…

计算机网络相关

OSI七层模型 各层功能&#xff1a; TCP/IP四层模型 应用层 传输层 网络层 网络接口层 访问一个URL的全过程 在浏览器中输入指定网页的 URL。 浏览器通过 DNS 协议&#xff0c;获取域名对应的 IP 地址。 浏览器根据 IP 地址和端口号&#xff0c;向目标服务器发起一个 TCP…

「滚雪球学Java」:国际化(章节汇总)

&#x1f3c6;本文收录于「滚雪球学Java」专栏&#xff0c;专业攻坚指数级提升&#xff0c;助你一臂之力&#xff0c;带你早日登顶&#x1f680;&#xff0c;欢迎大家关注&&收藏&#xff01;持续更新中&#xff0c;up&#xff01;up&#xff01;up&#xff01;&#xf…

深度学习绘制热力图heatmap、使模型具有可解释性

思路 获取想要解释的那一层的特征图&#xff0c;然后根据特征图梯度计算出权重值&#xff0c;加在原图上面。 Demo 加上类激活(cam) 可以看到&#xff0c;cam将模型认为有利于分类的特征标注了出来。 下面以ResNet50为例: Trick: 使用 for i in model._modules.items():可以…

JavaScript和HTML/CSS之间有什么区别?它们之间的关系是什么?

下面是一个简单的代码示例&#xff0c;展示了HTML、CSS和JavaScript是如何一起工作的&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…

「Linux系列」Shell介绍及起步

文章目录 一、Shell简介二、Shell脚本三、Shell解释器四、相关链接 一、Shell简介 Shell本身是一个用C语言编写的程序&#xff0c;它既是一种命令语言&#xff0c;又是一种程序设计语言。作为命令语言&#xff0c;它交互式地解释和执行用户输入的命令&#xff1b;作为程序设计…

深度学习500问——Chapter03:深度学习基础(4)

文章目录 3.7 预训练与微调&#xff08;fine tuning&#xff09; 3.7.1 为什么无监督预训练可以帮助深度学习 3.7.2 什么是模型微调 fine tuning 3.7.3 微调时候网络参数是否更新 3.7.4 fine-tuning模型的三种状态 3.8 权重偏差和初始化 3.8.1 全都初始化为0 3.8.2 全都初始化为…

小程序调用相机拍照上传

用的wpy框架&#xff0c;有this&#xff0c;原声小程序就按照你们的调方法就行了 //打开相机openCream() {const _this this;wx.showActionSheet({itemList: ["拍照"],//[拍照,相册]itemColor: "",//成功时回调success: function(res) {if (!res.cancel) …

Android Launcher开发注意事项

在开发Android Launcher时&#xff0c;需要关注性能、用户体验、权限管理、兼容性等方面&#xff0c;同时遵循相关的开发者政策和最佳实践。有几个重要的注意事项&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎…

选择word中的表格VBA

打开开发工具 选择Visual Basic插入代码 Sub 选择word中的表格() Dim t As Table an MsgBox("即将选择选区内所有表格&#xff0c;若无选区&#xff0c;则选择全文表格。", vbYesNo, "提示") If an - 6 Then Exit Sub Set rg IIf(Selection.Type wdSel…

[HFCTF 2021 Final]easyflask

[HFCTF 2021 Final]easyflask [[python反序列化]] 首先题目给了提示&#xff0c;有文件读取漏洞&#xff0c;读取源码 #!/usr/bin/python3.6 import os import picklefrom base64 import b64decode from flask import Flask, request, render_template, sessionapp Flask(_…

HarmonyOS NEXT应用开发之侧滑返回事件拦截案例

介绍 在编辑场景中&#xff0c;存在用户误触返回&#xff0c;导致内容未保存就退出编辑页的现象; 本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截&#xff0c;提示用户保存编辑内容&#xff0c;并使用preferences实例持久化保存内容。 效果预览图 使…

什么是常用的前端开发工具和框架?列举几个常用的前端框架和其特点。

前端开发工具和框架在Web开发中起着至关重要的作用&#xff0c;它们帮助开发者更高效地构建用户界面、管理数据和交互性。以下是一些常用的前端开发工具和框架&#xff1a; 1. **开发工具**&#xff1a; * **Visual Studio Code**&#xff1a;这是一个非常流行的代码编辑器…