vue3生成二维码qrcode

在Vue 3中生成二维码可以使用第三方库，比如qrcode。以下是使用qrcode库生成二维码的示例代码：

首先，安装qrcode库：

npm install qrcode

然后，在Vue组件中使用qrcode库生成二维码：

<template>
  <div>
    <img :src="qrCodeDataUrl" alt="QR Code" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';

export default {
  setup() {
    const qrCodeDataUrl = ref('');

    onMounted(async () => {
      const text = 'https://example.com'; // 要生成二维码的文本
      try {
        const dataUrl = await QRCode.toDataURL(text);
        qrCodeDataUrl.value = dataUrl;
      } catch (error) {
        console.error('Failed to generate QR Code', error);
      }
    });

    return {
      qrCodeDataUrl,
    };
  },
};
</script>

在上述代码中，我们首先导入qrcode库，并在setup函数中创建了一个qrCodeDataUrl的响应式变量。

在onMounted钩子函数中，我们使用QRCode.toDataURL方法生成二维码的数据URL，并将其赋值给qrCodeDataUrl变量。注意，在实际使用时，您可以将要生成二维码的文本替换为您需要的内容。

最后，在模板中使用qrCodeDataUrl变量作为<img>标签的src属性，以显示生成的二维码。

请确保已经安装了qrcode库，并根据您的实际需求进行调整。希望这可以帮助到您。如果您有任何其他问题，请随时提问。