当前位置: 首页 > news >正文

vue使用qrcodejs2生成二维码

目录

概要

构建展示的vue组件qrcode.vue

组件的使用


概要

项目中用到需要展示二维码的样式,想到了qrcode

例如:

前提:安装包

npm install qrcodejs2 --save

构建展示的vue组件qrcode.vue

<template><div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {data() {return {qrcode: ''}},props: {id: {type: String,required: true},text: {  // 后端返回的二维码地址type: String,default: 'M000001'},width: {type: String,default: '100'},height: {type: String,default: '100'},colorDark: {type: String,default: '#000000'},colorLight: {type: String,default: '#ffffff'}},watch: {text(newText) {this.createQrcode()}},mounted() {this.createQrcode()},methods: {createQrcode() {if(this.qrcode) {  // 有新的二维码地址了,先把之前的清除掉this.$refs[this.id].innerHTML = ''}this.qrcode = new QRCode(this.$refs[this.id], {text: this.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#width: this.width, // 二维码宽度 (不支持100%)height: this.height, // 二维码高度 (不支持100%)colorDark: this.colorDark,colorLight: this.colorLight,correctLevel: QRCode.CorrectLevel.H,})},// 制作另一个二维码updateCode() {this.qrcode.makeCode("http://naver.com")}}
}
</script>

组件的使用

<template><div>/***item为二维码的内容*colorDark为前景色*/<QrCode :id="'QrCode'" :text="item" colorDark="#802126"/></div></template>
<script>
import QrCode from '../../components/QRcode/qrCode.vue'  // 引用上面封装的二维码组件
export default {
components: { QrCode },//注册组件}</script>

小结

这个组件还是相当好用的,多多推荐

相关文章:

vue使用qrcodejs2生成二维码

目录 概要 构建展示的vue组件qrcode.vue 组件的使用 概要 项目中用到需要展示二维码的样式&#xff0c;想到了qrcode 例如&#xff1a; 前提&#xff1a;安装包 npm install qrcodejs2 --save 构建展示的vue组件qrcode.vue <template><div style"width: …...

python注释

任何编程语言都少不了注释&#xff0c;Python也不例外&#xff0c;以下是Python注释的具体用法&#xff1a; 单行注释 Python编程语言的单行注释常以#开头&#xff0c;单行注释可以作为单独的一行放在被注释代码行之上&#xff0c;也可以放在语句或者表达式之后。 实例&…...

update-alternatives详解

1.功能作用 update-alternatives是dpkg的实用工具&#xff0c;用来维护系统命令的符号链接&#xff0c;以决定系统默认使用什么命令。 在Debian系统中&#xff0c;我们可能会同时安装有很多功能类似的程序和可选配置&#xff0c;如Web浏览器程序(firefox&#xff0c;konquero…...

JavaScript 编写更好的条件语句

在任何编程语言中&#xff0c;代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。 例如&#xff0c;在一个游戏中&#xff0c;如果玩家生命点为0&#xff0c;游戏结束。在天气应用中&#xff0c;如果在早上被查看&#xff0c;显示一个日出图片&#xff0c;如…...

聊聊PBE算法

序 本文主要研究一下PBE算法 PBE PBE即Password Based Encryption&#xff0c;基于口令的加密&#xff0c;它是一种组合算法&#xff0c;即一般是哈希对称算法&#xff0c;比如PBEWithMD5AndDES&#xff0c;就是用MD5做哈希&#xff0c;用DES做加解密&#xff0c;而其密钥则…...

用MFC打开外部程序

在MFC&#xff08;Microsoft Foundation Classes&#xff09;中&#xff0c;你可以使用ShellExecute函数来打开Notepad并加载指定的文件。ShellExecute函数是Windows API的一部分&#xff0c;它可以执行与操作系统相关的操作&#xff0c;例如打开文件、运行程序等。 以下是在M…...

基于全新电脑环境安装pytorch的GPU版本

前言&#xff1a; 距离第一次安装深度学习的GPU环境已经过去了4年多&#xff08;当时TensorFlow特别麻烦&#xff09;&#xff0c;现在发现安装pytorch的GPU版本还是很简单方便的&#xff0c;流程记录如下。 安装步骤&#xff1a; 步骤一&#xff1a;官网下载Anaconda Free…...

[当前就业]2023年8月25日-计算机视觉就业现状分析

计算机视觉就业现状分析 前言&#xff1a;超越YOLO&#xff1a;计算机视觉市场蓬勃发展 如今&#xff0c;YOLO&#xff08;You Only Look Once&#xff09;新版本的发布周期很快&#xff0c;每次迭代的性能都优于其前身。每 3 到 4 个月就会推出一个升级版 YOLO 变体&#xf…...

虚拟化技术原理

计算虚拟化 介绍 把物理主机上物理资源&#xff08;CPU&#xff0c;内存&#xff0c;IO外设&#xff09;&#xff0c;通过虚拟化层抽象成超量、等量的逻辑资源&#xff08;虚拟CPU&#xff0c;虚拟内存&#xff0c;虚拟IO设备&#xff09;&#xff0c;然后重新组合形成新的虚…...

opencv-答题卡识别判卷

#导入工具包 import numpy as np import argparse import imutils import cv2# 设置参数 ap = argparse.ArgumentParser() ap.add_argument("-i", "--image", required=True,help="path to the input image") args = vars(ap.parse_args())# 正确…...

【Linux】基础IO

目录 一、回顾C语言文件操作二、文件系统调用接口1. open2.write3.read 三、文件描述符四、重定向1.输出重定向2.输入重定向 五、dup2 一、回顾C语言文件操作 1 #include<stdio.h>2 #include<stdlib.h>3 4 #define LOG "log.txt"5 6 int main()7 {8 //…...

【Go 基础篇】深入探索:Go语言中的二维数组

在计算机编程中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储相同类型的元素。而二维数组作为数组的一种扩展&#xff0c;允许我们以类似表格的方式存储和处理数据。在Go语言中&#xff0c;二维数组是一个重要的概念&#xff0c;本文将深入探讨Go语言中的二维数组…...

IntelliJ IDEA 2023.2.1使用Git时弹出“使用访问令牌登录”问题解决

这里写目录标题 一、内网Git环境GitLabGogsGitea 二、外网Git环境GitHubGitee 升级为IntelliJ IDEA 2023.2.1后&#xff0c;使用Git时弹出“使用访问令牌登录”的窗口&#xff0c;习惯使用Git帐号密码登录的用户&#xff0c;面对这个突如其来的弹窗真的很懵。 一、内网Git环境 …...

前端开发学习路线

无前端基础学习路线&#xff1a; B站免费视频1 B站免费视频2 有HTML、CSS、JavaScript基础&#xff0c;可直接通过以上视频中Vue2Vue3中实战项目学习Vue。...

1、英飞凌-AURIX-TC297简介

目录 TC297简介TC297特点&#xff1a;系统优势最具创新性的安全应用场景 printf("欢迎关注公众号&#xff1a;Kevin的学习站/车载嵌入式探索者&#xff0c;博主建立了一个车规级开发交流群&#xff0c; 感兴趣的朋友可以关注公众号&#xff0c;加个人WX&#xff1a;_kevin…...

Android 音频框架 基于android 12

文章目录 前言音频服务audioserver音频数据链路hal 提供什么样的作用 前言 Android 的音频是一个相当复杂的部分。从应用到框架、hal、kernel、最后到硬件&#xff0c;每个部分的知识点都相当的多。而android 这部分代码在版本之间改动很大、其中充斥着各种workaround的处理&a…...

项目实践:类平面抓取点计算(占位,后面补充)

文章目录 文章目录&#xff1a;3D视觉个人学习目录微信&#xff1a;dhlddxB站: Non-Stop_...

中央空调秒变智能 青岛中弘P15面板式空调网关初体验

在智能家居逐步渗透进千家万户的今天&#xff0c;如何将中央空调融入到智能化场景&#xff0c;以实现场景联动、提升家居生活的智能化和科技化程度&#xff0c;中弘给出了新的答案。本期智哪儿就带大家测评一下青岛中弘P15面板式空调网关&#xff0c;一起看看它的价值所在。 高…...

vue create -p dcloudio/uni-preset-vue my-project创建文件报错443

因为使用vue3viteuniappvant4报错&#xff0c;uniapp暂不支持vant4&#xff0c;所以所用vue2uniappvant2 下载uni-preset-vue-master 放到E:\Auniapp\uni-preset-vue-master 在终端命令行创建uniapp vue create -p E:\Auniapp\uni-preset-vue-master my-project...

本地电脑搭建Plex私人影音云盘教程,内网穿透实现远程访问

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语6 总结 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...