如何在Vue3中创建一个可以包含公司Logo的二维码？

在Vue3中，你可以使用`qrcode-svg-generator`库结合Element Plus的`el-image`组件来创建一个包含公司Logo的二维码。以下是一个简单的步骤：

1. 首先，你需要安装所需的依赖库。在你的项目目录中运行：

   npm install qrcode-svg-generator element-plus @element-plus/icons

2. 引入所需模块到你的Vue组件中：

   <script setup>
     import { ref } from 'vue';
     import QRCodeSVG from 'qrcode-svg-generator';
     import ElImage from 'element-plus/es/components/image.vue';
   </script>

3. 创建一个函数来生成二维码，并添加公司Logo：

   const qrCode = ref(null);
   const generateQRCode = async () => {
     const logoDataUrl = 'data:image/png;base64,...'; // 你的公司Logo的Base64数据
     const qrCodeGenerator = new QRCodeSVG();
     qrCode.value = await qrCodeGenerator.createDataURL('text/plain', '公司名称', {
       logo: logoDataUrl,
       logoWidth: 50, // 根据需要调整logo大小
       logoPosition: 'right', // 可选值有'top-left', 'top-right', 'bottom-left', 'bottom-right'
     });
   };

4. 在模板中使用`ElImage`展示二维码：

   <template>
     <div>
       <button @click="generateQRCode">生成二维码</button>
       <ElImage :src="qrCode" lazy></ElImage>
     </div>
   </template>

记得替换`logoDataUrl`为实际的Logo Base64字符串，并根据需求自定义Logo位置和大小。