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

embedded/2024/11/15 4:31:54/

安装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.ppmy.cn/embedded/115303.html

相关文章

【微信小程序】连续拍照功能实现

前言&#xff1a; 最近在使用uniapp开发微信小程序&#xff0c;遇到这样一个需求&#xff0c;用户想要连续拍照&#xff0c;拍完之后可以删除照片&#xff0c;保留自己想要的照片&#xff0c;然后上传到服务器上。由于原生的方法只能一个个拍照上传&#xff0c;所以只能自己通过…

uniapp自定义Tabbar教程

uniapp自定义Tabbar 1、定义tabbar 在pages.json中配置除主要页面地址&#xff0c; "tabBar": {"custom": true,"list": [{"pagePath": "pages/home/index"},{"pagePath": "pages/user-center/index"…

Linux:虚拟文件系统/proc和self进程

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 /proc目录 在Linux操作系统中&#xff0c;目录/proc是一个虚拟文件系统&#xff0c;称为procfc&#xff0c;用于访问内核和系统的实时状态信息。这个文件系统不同于常规…

Microsoft 365 Copilot: Wave 2 发布,开启AI时代下的全新工作流

本周一&#xff08;9月16日&#xff09;&#xff0c;微软对 Microsoft 365 Copilot 办公辅助工具进行了重大升级&#xff0c;推出 Wave 2 版本。新版 Copilot 将为 Microsoft 365 用户带来一系列新功能和改进&#xff0c;进一步提升工作效率与用户体验&#xff0c;正式开启AI时…

【计算机网络】初识网络

初识网络 初识网络网络的发展局域网广域网 网络基础IP地址端口号协议五元组协议分层OSI 七层模型TCP/IP五层模型封装和分用"客户段-服务器"结构 初识网络 网络的发展 在过去网络还没有出现的时候, 我们的计算机大部分都是独自运行的, 比如以前那些老游戏, 都是只能…

用Inno Setup打包QT程序输出安装包

InnoSetup打包编译好的QT程序 文章目录 InnoSetup打包编译好的QT程序介绍具体步骤自定义脚本更改引入配置文件/动态库路径申请管理员权限设置安装过程界面的图标和图片C程序依赖运行库 介绍 Inno Setup&#xff1a;用于打包安装程序 具体步骤 首先打开inno setup compiler 第…

Qt容器类控件——QGroupBox和QTabWidget

文章目录 QGroupBox又来点餐QTabWidget使用演示 QGroupBox 容器类控件即里面可以容纳其他的控件 QGroupBox叫做分组框&#xff0c;可以把其他控件放在里面作为一组 QGroupBox的存在&#xff0c;只是为了让界面更好看一点&#xff0c;并不实现实质性的功能。 当界面较复杂的时候…

鸿蒙OpenHarmony【轻量系统内核扩展组件(CPU占用率)】子系统开发

基本概念 CPU&#xff08;中央处理器&#xff0c;Central Processing Unit&#xff09;占用率分为系统CPU占用率和任务CPU占用率。 系统CPU占用率&#xff1a;是指周期时间内系统的CPU占用率&#xff0c;用于表示系统一段时间内的闲忙程度&#xff0c;也表示CPU的负载情况。系…