前端使用qrcodejs2插件实现根据网址生成二维码

news2024/11/8 6:38:10

实现效果:

实现方法:

1.安装插件

npm install --save qrcodejs2

2.可以全局引入,也可以只在使用的vue文件中引入

import QRCode from 'qrcodejs2';

3.在vue文件的template中设置放置二维码的div

<div id="qrcode"></div>

4.在vue文件中的method中写获取二维码的方法

getCode() {
       //    生成二维码
       var qrcode = new QRCode('qrcode', {
           text: 'http://www.baidu.com', // url
           width: 120, // 二维码宽度
           height: 120, // 二维码高度
           colorDark: '#000000', // 前景色
			colorLight: '#ffffff', // 后景色
			correctLevel: QRCode.CorrectLevel.L // 容错级别
       });
   },

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

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

相关文章

8个视频剪辑素材网站,免费下载

找视频剪辑素材就上这8个网站&#xff0c;免费下载&#xff0c;可商用&#xff0c;赶紧收藏起来~ 免费视频素材 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYxMjky 菜鸟图库网素材非常丰富&#xff0c;网站主要还是以设计类素材为主&#xff0c;高清视频素材也很多…

ssm+vue的毕业生跟踪调查反馈管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的毕业生跟踪调查反馈管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

整理uvc驱动相关函数的调用流程

目录 1、uvc_video.c初始化函数的调用关系 2、uvc_queue.c3、uvc_v4l2.c4、v4l2-core5、数据传输1、分配一个gadget请求2、请求一个queue 1、uvc_video.c // uvc_video.c uvc_video_encode_header uvc_video_encode_data uvc_video_encode_bulk uvc_video_encode_isoc uvcg_vi…

Python学习基础笔记七十八——Socket编程1

现在的软件开发基本上都需要网络通讯。 不管是传统计算机软件&#xff0c;还是手机软件&#xff0c;还是物联网嵌入系统软件&#xff0c;这些都要和其他网络系统进行通讯。 而当今世界基本上都是使用TCP/IP协议进行通讯的。 TCP/IP协议是一种传输数据的方案。 收发信息的程序…

每个epoch的溯源(MNE)

每个epoch的溯源&#xff1a; from mne.minimum_norm import apply_inverse_epochs stcs apply_inverse_epochs(epochs,inverse_operator,lambda2,method,pick_ori"normal"# naveevoked.nave, )

ArrayDeque 源码解析(JDK1.8)

目录 一. 前言 二. 源码解析 2.1. 概览 2.2. 属性 2.3. 构造方法 2.4. 入队 2.4.1. addFirst(E, e) 2.4.2. add(E e) & addLast(E e) 2.4.3. offer(E e) 2.5. 扩容 2.6. 出队 2.6.1. poll() & pollFirst() 2.6.2. pollLast() 2.7. 删除元素 2.8. 获取元…

springweb+vue前后端分离开发,集成部署

背景&#xff1a; 在自己做测试的时候&#xff0c;由于需要项目和项目的前端页面使用同样接口访问&#xff0c;所以需要将前端代码部署到后端项目下。前端采用vue&#xff0c;后端采用springboot。 首先时建立一个vue项目&#xff0c;这个可以参照网上的案例&#xff0c;创建方…

思维模型 巴纳姆效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。 1 巴纳姆效应的应用 1.1 “占卜者”的故事 1 遇到占卜师的汤姆 汤姆是一位年轻的上班族&#xff0c;他一直对自己的未来感到迷茫和困惑。有一天&#xff0c;他在一家神秘的占卜店里遇到…

Python处理PDF——PyMuPDF的安装与使用详解

​​​​​​​ 1、PyMuPDF简介 1. 介绍 在介绍PyMuPDF之前&#xff0c;先来了解一下MuPDF&#xff0c;从命名形式中就可以看出&#xff0c;PyMuPDF是MuPDF的Python接口形式。 MuPDF MuPDF 是一个轻量级的 PDF、XPS和电子书查看器。MuPDF 由软件库、命令行工具和各种…

28 mysql 数据记录的 存储更新删除

前言 前面 我们探讨了 索引记录的 新增, 更新, 删除 这里 我们来看一下 mysql 的核心数据记录的 新增更新删除 这里 来看一下 增删改 的相关实现 数据记录 和 索引记录 的处理方式是一致的 mysql 数据记录的存储 新增部分参见 自增长主键的实现 以及 记录的插入 mysql…

解决提交到App Store时的ITMS-90478和ITMS-90062错误

目录 引言 正文 1. 什么是ITMS-90478和ITMS-90062错误&#xff1f; 2. 解决方法 2.1 确定当前的版本号和构建号 2.2 递增版本号和构建号 2.3 再次尝试提交应用 总结 参考资料 错误记录 摘要&#xff1a;本文为iOS技术博主分享&#xff0c;将详细介绍解决提交应用到App…

QCustomPlot添加标题头

1 效果图 2 代码 is2Label QString("add title layout element");// add title layout element:ui->customplot->plotLayout()->insertRow(0);ui->customplot->plotLayout()->addElement(0, 0, new QCPTextElement(ui->customplot, xAxis2Lab…

设备巡检管理系统有什么用?企业如何提高生产效率和生产安全?

在当今工业生产领域&#xff0c;设备巡检的重要性不言而喻。然而&#xff0c;传统巡检方式存在的诸多问题&#xff0c;如数据不规范、漏检误检等&#xff0c;严重制约了企业生产效率和产品质量。为解决这一问题&#xff0c;我们推出了一款设备巡检管理系统——“的修”工单管理…

宝塔Nginx配置反向代理后如何配置跨域?

直接将 27行更换成如下配置即可 上图有示例 if ( $static_fileAUWz2fmi 0 ){add_header Cache-Control no-cache;add_header Access-Control-Allow-Origin "$http_origin";add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;add_header Acc…

ASEMI肖特基二极管MBR10100CT参数,MBR10100CT封装

编辑-Z MBR10100CT参数描述&#xff1a; 型号&#xff1a;MBR10100CT 最大重复峰值反向电压VRRM&#xff1a;100V 最大RMS电压VRMS&#xff1a;70V 最大直流阻断电压VDC&#xff1a;100V 最大平均正向电流IF&#xff1a;10A 峰值正向浪涌电流IFSM&#xff1a;150A 最大…

使用java代码调用超融合登录接口,跟着敲就完事,官方文档也没有的资源~

一、准备工作 接口地址&#xff1a; 获取公钥&#xff1a;/vapi/json/public_key 登录&#xff1a;/vapi/json/access/ticket 登陆接口和 API 调用说明&#xff1a; 这部分步骤均为官网文档&#xff0c;最后步骤则是本地测试用户列表接口 1、第一步&#xff1a;获取公钥 注意&…

Echarts自定义柱状图

目录 效果图 echarts官网找相似图 将柱状图引入html页面中 自定义柱状图 将不需要的属性删除 ​编辑 修改图形大小 grid 不显示x轴 ​编辑 不显示y轴线和相关刻度 ​编辑 y轴文字的颜色设置为自己想要的颜色 修改第一组柱子相关样式&#xff08;条状&#xff09; …

Richard Stallman 正在与癌症作战

导读为了纪念 GNU 项目成立 40 周年&#xff0c;自由软件基金会&#xff08;FSF&#xff09;已计划在 10 月 1 日&#xff08;即GNU 40&#xff09;为家庭、学生以及美国的其他人群组织一场黑客马拉松活动。 活动之前&#xff0c;GNU 项目于 9 月 27 日迎来了 40 岁生日&#…

GraalVM入门教程

GraalVM入门教程 GraalVM是什么几个名词介绍native-imagegu 基础环境搭建linux下载GraalVM配置环境变量下载安装AOT编译器 native-image安装gcc、glibc-devel 与 zlib-devel下载maven并配置环境变量 windows下载GraalVM配置环境变量下载安装AOT编译器 native-image下载配置wind…

阿里云服务器的购买方式有哪些?哪些实例规格的云服务器价格相对便宜一点?

对于还没购买过阿里云服务器的用户来说&#xff0c;如何购买阿里云服务器以及现在购买哪些实例规格的云服务器价格比较便宜是用户比较关心的&#xff0c;购买阿里云服务器的方式主要有四种&#xff0c;而目前价格比较便宜的云服务器实例规格有轻量应用服务器和和经济型、通用算…