当前位置: 首页 > 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;特…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...