动态生成二维码图片 - 使用Vue 3和qrcode库

在本教程中，我们将学习如何使用Vue 3和qrcode库创建一个简单的应用程序，可以根据用户输入的URL动态生成二维码图片。我们将使用Vue 3的Composition API来实现这个功能，并使用qrcode库来生成二维码图片。

前提条件

在开始之前，请确保您已经安装了Node.js和npm（Node Package Manager）。

步骤1：初始化项目

首先，打开命令行终端，创建一个新的Vue项目并进入项目目录。

vue create dynamic-qrcode-app
cd dynamic-qrcode-app

安装qrcode库依赖：

npm install qrcode

步骤2：编写代码

<template>
  <div class="test">
    <input type="text" v-model="url">
    <div class="qrcode">
      <!-- 二维码 -->
      <canvas ref="qrcodeCanvas"> </canvas>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import QRcode from "qrcode";

// 创建一个ref来存储input框的值
const url = ref("http://www.example.com");

// 创建一个ref来存储canvas元素的引用
const qrcodeCanvas = ref(null);

// 使用watch函数监听url的变化，并在变化时更新二维码
watch(url, (newUrl) => {
  updateQRCode(newUrl);
});

onMounted(() => {
  updateQRCode(url.value);
})

// 函数来生成二维码
const updateQRCode = (newUrl) => {
  QRcode.toCanvas(
    qrcodeCanvas.value,
    newUrl,
    {
      width: 200, // 自定义宽度
      color: {
        dark: "#00f", // 自定义码的颜色
        light: "#fbb", // 自定义背景颜色
      },
    }
  );
};
</script>

<style scoped>
/* 添加您的样式代码（可选） */
</style>

这样，您已经成功地创建了一个使用Vue 3和qrcode库的应用程序，实现了根据用户输入的URL动态生成二维码图片。您可以在此基础上进行更多自定义和改进，例如添加样式、错误处理等。