使用 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
html 复制代码
<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
html 复制代码
<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. 运行应用

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

html 复制代码
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 值来展示各种大小和纠错级别的二维码。

相关推荐
苦逼的搬砖工2 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主4 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat5 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee10 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叶落阁主13 分钟前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
叫我詹躲躲14 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊14 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅17 分钟前
JavaScript 函数详解
前端·javascript
金金金__19 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
葡萄城技术团队20 分钟前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript