Vue使用qrcodejs2-fix生成网页二维码

安装qrcodejs2-fix

npm install qrcodejs2-fix

在这里插入图片描述

核心代码

  • 在指定父view中生成一个二维码
  • 通过id找到父布局
	//通过id找到父布局let codeView = document.getElementById("qrcode")new QRCode(codeView, {text: "测试",width: 128,height: 128,colorDark: '#000000',colorLight: '#ffffff',})
  • 删除父布局中的内容,防止生成多个重复的二维码
 //删除子元素while (codeView.firstChild) {codeView.removeChild(codeView.firstChild);}

完整代码

<script>
import QRCode from 'qrcodejs2-fix';export default {methods: {createQrCode() {let codeView = document.getElementById("qrcode")console.log("获取到codeview" + codeView)//删除子元素while (codeView.firstChild) {codeView.removeChild(codeView.firstChild);}new QRCode(codeView, {text: "测试",width: 128,height: 128,colorDark: '#000000',colorLight: '#ffffff',})}},mounted() {this.createQrCode()}
}</script><template><div class="qrcode" id="qrcode"></div>
</template><style scoped>
.qrcode {margin: auto;width: 125px;height: 125px;background: #d0d9ff;
}
</style>

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

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

相关文章

three.js 热力图

使用three.js 和 heatMap.js 实现在 三维场景中展示热力图的效果&#xff0c;以下代码复制粘贴即可在你的本机运行。 在线编辑运行预览可方位 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyexpand&idheatmap3D 在 https://threehub.cn 中还有很多案例…

力扣 中等 2300.咒语和药水的成功对数

文章目录 题目介绍解法 题目介绍 解法 class Solution {public int[] successfulPairs(int[] spells, int[] potions, long success){Arrays.sort(potions);int n spells.length, m potions.length;int[] pairs new int[n];for (int i 0; i < n; i) {int left 0, righ…

【leetcode】树形结构习题

二叉树的前序遍历 返回结果&#xff1a;[‘1’, ‘2’, ‘4’, ‘5’, ‘3’, ‘6’, ‘7’] 144.二叉树的前序遍历 - 迭代算法 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,…

汉王手写签批控件如何在谷歌、火狐、Edge等浏览器使用

背景 近日&#xff0c;有网友咨询汉王手写签批控件是否可以通过allWebPlugin中间件技术加载到谷歌、火狐、Edge等浏览器&#xff1f;为此&#xff0c;笔者详细了解了一下汉王手写签批控件&#xff0c;它是一个标准的ActiveX控件&#xff0c;曾经主要在IE浏览器使用&#xff0c;…

C语言 | Leetcode C语言题解之第401题二进制手表

题目&#xff1a; 题解&#xff1a; char** readBinaryWatch(int turnedOn, int* returnSize) {char** ans malloc(sizeof(char*) * 12 * 60);*returnSize 0;for (int i 0; i < 1024; i) {int h i >> 6, m i & 63; // 用位运算取出高 4 位和低 6 位if (h &…

Laravel邮件发送:从配置到发邮件的指南!

Laravel邮件发送功能如何实现&#xff1f;怎么使用Laravel发信&#xff1f; Laravel作为一款流行的PHP框架&#xff0c;提供了强大且易用的邮件发送功能。AokSend将详细介绍如何从配置到实际发送邮件的全过程&#xff0c;帮助你快速掌握Laravel邮件发送的技巧。 Laravel邮件发…

对 JavaScript 原型的理解

笔者看了一些有关 JavaScript 原型的文章有感而发&#xff0c;就将所感所悟画了下来如果有理解错误和不足的地方&#xff0c;欢迎各位大佬指出&#xff0c;笔者感激不尽

2024华韵视听大会 “发现佛山”文旅影视产业调研活动-娅米的阳光城堡

9月13日上午&#xff0c;作为“2024华韵视听大会”系列活动之一&#xff0c;“发现佛山”文旅影视产业调研活动在佛山市高明区举行。来自“长风破浪”青年音乐人唱享计划及青年影视人扶持计划&#xff08;下简称“长风破浪”计划&#xff09;的青年唱作人左其铂、陈柏川和青年歌…

2024年超好用的公司加密软件分享|十款企业防泄密软件推荐

在数字化时代&#xff0c;企业数据的安全性变得尤为重要。随着网络攻击和数据泄露事件的频发&#xff0c;企业需要采取有效的措施来保护敏感信息。加密软件作为一种重要的数据保护工具&#xff0c;能够帮助企业防止数据泄露和未经授权的访问。本文将为您推荐十款2024年超好用的…

【梯度下降算法学习笔记】

梯度下降单参数求解 经过之前的学习我们来引入梯度下降的理念 α \alpha α为学习率 w 1 w 初 − α ∂ J ( w ) ∂ w w_1w_初-\alpha\frac{\partial J(w)}{\partial w} w1​w初​−α∂w∂J(w)​ w 2 w 1 − α ∂ J ( w 1 ) ∂ w 1 w_2w_1-\alpha\frac{\partial J(w_1)}…

【车载以太网】【SOME/IP】Wireshark 解析

目录 ​​​​​​​Wireshark 官方插件 相关代码: 启用协议插件 Lua插件 测试数据包 Wireshark 下载链接:Wireshark Go DeepSOMEIP插件介绍:https://www.wireshark.org/docs/dfref/s/someip.html官方插件 Wireshark从3.2版本开始支持SOME/IP,启用相应的插件即可以…

pikachu XXE(XML外部实体注入)通关

靶场&#xff1a;pikachu 环境: 系统&#xff1a;Windows10 服务器&#xff1a;PHPstudy2018 靶场&#xff1a;pikachu 关卡提示说&#xff1a;这是一个接收xml数据的api 常用的Payload 回显 <?xml version"1.0"?> <!DOCTYPE foo [ <!ENTITY …

.NET内网实战:通过命令行解密Web.config

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧。 02基本介绍 03编码实现 在.NET应用系统中&#xff0c;保护数据库连接字符串的安全性至关重要。.NET 提供了一种通过 DataProtectionC…

ACM digital library的高级检索

内容来自ACM Digital Library的高级检索 (tsinghua.edu.cn) 1.搜索源 默认的是ACM出版的全文数据库(检索免费&#xff0c;阅读付费需订阅&#xff0c;通过各学校校园网免费阅读全文&#xff09; The ACM Guide to Computing literature用于检索计算机学科文献&#xff0c;除…

B端管理系统要提升,观摩优秀作品是捷径之一。

观摩优秀的作品可以帮助B端管理系统的设计团队不断学习和进步&#xff0c;从而提升系统的设计水平和用户体验&#xff0c;为企业的发展和竞争力提供有力的支持。 这里分享一批国外的优秀B端系统界面&#xff0c;供大家欣赏。

【vue】vue3+ts对接科大讯飞大模型3.5智能AI

如今ai步及生活的方方面面,你是否也想在自己的网站接入ai呢&#xff1f;今天分享科大讯飞大模型3.5智能AI对接。 获取APPID、APISecret、APIKey 讯飞开放平台注册登录控制台创建自己的应用复制备用 准备工作做好,直接开始上代码了。 源码参考 <script setup lang"t…

软件自动定时启动器-添加可执行文件软件,设置启动的时间,也可以设置关闭的时间-供大家学习研究参考

点击添加软件&#xff0c;可以添加可执行文件软件&#xff0c;设置启动的时间&#xff0c;也可以设置关闭的时间 注意&#xff0c;时间为00&#xff1a;00&#xff1a;00 等于没设置&#xff0c;这个时间不在设置范围&#xff0c;其他任何时间都可以。 下载地址&#xff1a; h…

飞驰云联FTP替代方案:安全高效文件传输的新选择

FTP协议广泛应用各行业的文件传输场景中&#xff0c;由于FTP应用获取门槛低、使用普遍&#xff0c;因此大部分企业都习惯使用FTP进行文件传输。然而面临激增的数据量和网络安全威胁的不断演变&#xff0c;FTP在传输安全性与传输性能上有所欠缺&#xff0c;无法满足企业现在的高…

tomcat服务器

tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器。Tomcat 虽然和 Apache 或者 Nginx 这些 Web 服务器一样&#xff0c;具有处理 HTML 页面的功能&#xff0c;然而由于其处理静态 HTML 的能力远不及 Apache 或者 Nginx&#x…

【自动驾驶】控制算法(九)深度解析车辆纵向控制 | 从算法基础到 Carsim 仿真实践

写在前面&#xff1a; &#x1f31f; 欢迎光临 清流君 的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落。&#x1f4dd; 个人主页&#xff1a;清流君_CSDN博客&#xff0c;期待与您一同探索 移动机器人 领域的无限可能。 &#x1f50d; 本文系 清流君 原创之作&…