使用 Vue 3 和 qrcode.js 开发二维码显示组件

二维码在现代应用中广泛使用,例如支付、身份验证、链接分享等。本文将介绍如何使用 Vue 3 和 qrcode.js 库来创建一个灵活的二维码显示组件,并展示如何在应用中使用它。

1. 安装必要的依赖

首先,我们需要安装 Vue 3 和 qrcode.js。如果你还没有创建 Vue 3 项目,可以使用 Vue CLI 快速创建一个新项目:

npm install -g @vue/cli
vue create qrcode-app
cd qrcode-app

然后,安装 qrcode.js:

npm install qrcode

2. 创建 QrCodeGenerator 组件

接下来,我们创建一个名为 QrCodeGenerator 的组件,用于生成和显示二维码。

QrCodeGenerator.vue
<template><div><canvas ref="qrcode"></canvas></div>
</template><script setup>
import { ref, onMounted, watch } from 'vue';
import QRCode from 'qrcode';const props = defineProps({value: {type: String,required: true,},size: {type: Number,default: 200,},level: {type: String,default: 'M',validator: (value) => ['L', 'M', 'Q', 'H'].includes(value),},
});const qrcode = ref(null);const generateQrCode = () => {if (qrcode.value) {QRCode.toCanvas(qrcode.value, props.value, {width: props.size,errorCorrectionLevel: props.level,}, (error) => {if (error) console.error(error);});}
};onMounted(generateQrCode);watch(() => props.value, generateQrCode);
watch(() => props.size, generateQrCode);
watch(() => props.level, generateQrCode);
</script>

3. 在应用中使用 QrCodeGenerator 组件

现在,我们可以在应用中使用 QrCodeGenerator 组件。我们将创建一个示例页面,展示不同大小和纠错级别的二维码。

App.vue
<template><div id="app"><h1>二维码示例</h1><QrCodeGenerator value="https://www.example.com" size="100" level="L"></QrCodeGenerator><QrCodeGenerator value="https://www.example.com" size="200" level="M"></QrCodeGenerator><QrCodeGenerator value="https://www.example.com" size="300" level="Q"></QrCodeGenerator><QrCodeGenerator value="https://www.example.com" size="400" level="H"></QrCodeGenerator></div>
</template><script setup>
import QrCodeGenerator from './components/QrCodeGenerator.vue';
</script>

4. 运行应用

确保你的项目设置正确,然后运行应用:

npm run serve

访问你的应用,你应该会看到一系列不同大小和纠错级别的二维码。

详细解释

组件定义和道具验证

QrCodeGenerator 组件中,我们定义了三个道具:valuesizelevelvalue 是必需的字符串道具,用于生成二维码的数据。size 是可选的数字道具,指定二维码的大小,默认值为 200。level 是可选的字符串道具,指定二维码的纠错级别,默认值为 M,支持 L(低)、M(中)、Q(四分之一)、H(高)四种级别。为了确保传入的纠错级别是有效的,我们使用了 validator 函数进行验证。

二维码生成逻辑

我们使用 Vue 3 的组合式 API(<script setup> 语法糖)来定义组件的逻辑。在 setup 函数中,我们创建了一个对 Canvas 元素的引用,并定义了 generateQrCode 函数来生成二维码。在组件挂载时(onMounted)以及每次道具变化时(通过 watch 监听道具变化),都会调用 generateQrCode 函数。

应用中的使用

App.vue 中,我们引入并使用了 QrCodeGenerator 组件,并传递了不同的 valuesizelevel 值来展示各种大小和纠错级别的二维码。

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

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

相关文章

从C到C++,C++入门篇(1)

1.什么是C C是一种通用编程语言&#xff0c;由Bjarne Stroustrup在1980年代初开发&#xff0c;作为C语言的扩展。 C支持多种编程范式&#xff0c;包括过程式编程、数据抽象、面向对象编程和泛型编程等。 这种语言在操作系统、游戏开发、图形界面、嵌入式系统、分布式系统、网…

变压器中的磁化和励磁电流波形

导出变压器中的磁化电流和励磁电流的图形方法具有说明性&#xff0c;因为它们使我们能够同时可视化产生这些波形的元素&#xff0c;例如磁通波形和磁性材料的典型 BH 曲线。 所得波形表明它们不是正弦波&#xff0c;并且对于励磁电流而言&#xff0c;它也不对称。 使用傅里叶…

vue2源码重写数组方法学习

在学习之前&#xff0c;我们需要问一个为什么&#xff0c;为什么vue2 源码要重写数组方法 响应式数据更新&#xff1a;通过重写数组方法&#xff0c;Vue 能够捕获对数组的变更操作&#xff08;如 push、pop、shift 等&#xff09;&#xff0c;并在数据发生变化时自动更新视图&a…

Facebook代运营 | Facebook广告投放步骤及要点

Facebook体量大&#xff0c;素材的更新频率快&#xff0c;通过Facebook进行广告投放的用户也越来越多&#xff0c;Facebook坐拥大量用户&#xff0c;同时有着非常科学的用户画像构建系统和推送机制&#xff0c;对于很多广告涉足的伙伴来说&#xff0c;更加的友好。 1. 创建广告…

Opentracing 代码Demo

背景 OpenTracing 是一个提供标准化分布式追踪功能的API和工具。它的主要作用包括: 跨系统边界追踪请求流程:OpenTracing 允许开发者跟踪一个请求从开始到结束在整个分布式系统中的所有经过的点(包括异构系统),帮助理解系统中的请求流程和服务间的相互依赖。 性能分析和瓶…

ubuntu系统 kubeadm方式搭建k8s集群

服务器环境与要求&#xff1a; 三台服务器 k8s-master01 192.168.26.130 操作系统&#xff1a; Ubuntu20.04 k8s-woker01 192.168.26.140 操作系统&#xff1a; Ubuntu20.04 k8s-woker02 192.168.26.150 操作系统&#xff1a; Ubuntu20.04 最低配置&#xff1a;2…

斯坦福 AI 团队被曝抄袭中国大模型开源成果;Zoom 创始人谈视频会议未来丨 RTE 开发者日报 Vol.218

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

gradio出现httpcore.ReadTimeout: timed out问题

解决办法 pip install https://gradio-builds.s3.amazonaws.com/aae46d9199e1edc8a22c96aba1ade12f6ebc1da1/gradio-4.21.0-py3-none-any.whl

2.29G大小Win 11系统来了,老爷机也能焕发第二春

Win 11 推出近三年以来微软大搞特搞的份额入侵计划&#xff0c;以目前情况来看算是彻底失败了。 国外知名机构 statcounter 最近公布了 4 月份 Windows 各版本份额调查结果。 其中显示&#xff0c;Win 11 占比 26% 左右&#xff0c;相较 2 月份 28% 反而开起了倒滑车。 来源&…

技术管理革新:三品PLM在电子电气行业的应用

随着科技的不断进步和市场需求的日益增长&#xff0c;电子电气行业正经历着前所未有的变革。产品生命周期的缩短和更新换代的加速&#xff0c;对企业的产品研发管理提出了更高的要求。在这样的背景下&#xff0c;产品生命周期管理PLM解决方案应运而生&#xff0c;旨在帮助电子电…

Python工程中,__init__.py文件有什么用

在Python工程中&#xff0c;__init__.py 文件有几个重要的用途&#xff1a; 标识目录为包&#xff1a; 在Python 3.3之前&#xff0c;__init__.py 文件的存在是为了告诉解释器&#xff0c;该目录是一个Python包。这使得包中的模块可以被导入和使用。即使在Python 3.3之后可以没…

隔离变压器的特点与作用

隔离变压器是一种常见的电力变压器&#xff0c;其主要特点和作用如下&#xff1a; 特点&#xff1a; 电气隔离&#xff1a; 隔离变压器的主要特点是将输入端和输出端完全电气隔离&#xff0c;通过磁耦合实现能量传递。这意味着输入端和输出端之间没有直接的电连接&#xff0c…

endswith方法 测试字符串是否以指定的后缀结束

Java String类中的endswith方法 Java String类 endsWith () 方法用于测试字符串是否以指定的后缀结束。 语法 public boolean endsWith (String suffix) 参数 suffix -- 指定的后缀。 返回值 如果参数表示的字符序列是此对象表示的字符序列的后缀&#xff0c;则返回 true&…

基于数据帧进行SQL查询

本教程将通过一个具体的案例来演示如何在Spark SQL中基于数据帧进行SQL查询。我们将从创建临时视图开始&#xff0c;然后使用spark对象执行SQL查询&#xff0c;包括投影、选择、统计和排序等操作。 具体步骤如下&#xff1a; 基于数据帧创建临时视图&#xff1a; 命令格式&…

深度学习笔记:1.anaconda安装

Download Anaconda Distribution | Anaconda 双击安装 设置环境变量 anaconda常用命令大全&#xff08;保姆级别建议收藏)-CSDN博客https://blog.csdn.net/m0_64892604/article/details/128806043?ops_request_misc%257B%2522request%255Fid%2522%253A%252217174671831680018…

This Python interpreter is in a conda environment

今天在查看python版本的时候出现警告 Warning: This Python interpreter is in a conda environment, but the environment has not been activated. Libraries may fail to load. To activate this environment please see https://conda.io/activation 这个警告意味着你…

MySql学习(二)——SQL通用语法之DDL

文章目录 二、SQL2.1 SQL通用语法2.2 SQL分类2.3 DDL2.3.1 DDL——数据库操作2.3.2 DDL——表操作-查询2.3.3 DDL——表操作-创建2.3.4 DDL——表操作-数据类型2.3.5 DDL——表操作-修改2.3.6 DDL——表操作-删除二、SQL 2.1 SQL通用语法 SQL语句可以单行或多行书写,以分号结…

2024年6月4日13:48:07-3.8功能说明1.保存草稿2.支持自定义SKU销售规格3.全网爆款企划支持一键提交

创建产品产品保存草稿、自定义编辑规格功能使用手册 尊敬的淘工厂商家&#xff1a; 淘工厂近两个月收到很多商家对淘工厂发品&#xff08;上品&#xff09;效率提升的改进建议&#xff0c;淘工厂本月将针对产品发布页的发品效率提升上线一系列改进功能&#xff0c;希望能加速…

c#快速获取超大文件夹文件名

c#快速获取超大文件夹文件名 枚举集合速度快&#xff1a;(10万个文件) //by txwtech IEnumerable<string> files2 Directory.EnumerateFiles("d:\aa", "*.xml", SearchOption.TopDirectoryOnly);//过滤指定查询xml文件 慢&#xff1a; var fi…

设计循环队列---力扣622

1、题目 1.1基础设置与讲解 循环队列&#xff0c;即固定长度的队列&#xff0c;可以想象成一个环形队列 就类似于这种队列&#xff0c;队尾指针后会有一个空位&#xff0c;用于控制判断队列为空还是为满&#xff1b; typedef int MyDataType;typedef struct {MyDataType fron…