Vue3 + TypeScript 实现二维码生成与展示

---

代码实现

<!-- 二维码解析 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';// 定义组件接收的 props
const props = defineProps({url: String, // 要生成二维码的 URL 地址
});// 存储生成的二维码图片数据
const qrCodeUrl = ref<string | null>(null);// 异步生成二维码的方法
const generateQRCode = async () => {try {// 使用 qrcode 库将 URL 转换为 Data URL 格式的二维码图片const dataUrl = await QRCode.toDataURL(props.url.trim());qrCodeUrl.value = dataUrl;} catch (error) {console.error('Error generating QR code:', error);}
};// 在组件挂载后自动调用生成二维码方法
onMounted(() => {generateQRCode();
});
</script><template><div id="QRCode"><!-- 显示生成的二维码图片 --><img :src="qrCodeUrl" style="width: 200px" alt="QR Code" /></div>
</template>

---

功能详解

1. 安装依赖

在使用 qrcode 库之前，需要先安装它：

npm install qrcode

如果需要类型支持，可以安装对应的类型定义包：

npm install --save-dev @types/qrcode

---

2. 核心功能解析

2.1 接收 URL 参数

通过 defineProps 定义了一个名为 url 的 prop，用于接收外部传递的 URL 地址。这个地址将作为二维码的内容。

2.2 生成二维码

使用 qrcode 提供的 toDataURL 方法，将传入的 URL 转换为 Base64 编码的 Data URL 图片格式。这个方法是异步的，因此需要用 await 或 .then 处理。

2.3 自动触发生成

在组件挂载完成后，通过 onMounted 生命周期钩子自动调用 generateQRCode 方法，确保二维码在页面加载时自动生成。

2.4 显示二维码

通过 <img> 标签动态绑定 src 属性，将生成的二维码图片显示在页面上。

---

使用示例

假设父组件传递了一个 URL 参数：

<template><QRCodeGenerator url="https://www.example.com" />
</template><script setup>
import QRCodeGenerator from './QRCodeGenerator.vue';
</script>

运行后，页面会显示一个基于 https://www.example.com 生成的二维码图片。

---