vue使用qrcode.vue生成二维码

使用qrcode.vue生成二维码的步骤如下：
1. 引入qrcode.vue组件，该组件的体积相对较小，但不能添加中心logo。
2. 在Vue模板中使用vue-qr组件，设置id为"qrcode"，并传入生成二维码所需的text和size参数。
3. 在Vue模板中添加一个按钮，当点击按钮时触发saveImg函数。
4. 在Vue的script setup中，使用import语句引入qrcode.vue组件和其他所需的资源。
5. 根据需要，可以在logoSrc变量中设置logo的路径。
6. 在saveImg函数中，获取生成的二维码图片元素，创建一个下载链接，并设置链接的href和download属性。
7. 点击按钮后，调用a元素的click方法，实现下载二维码的功能。

你可以参考以下代码示例：

<template>
  <qrcode id="qrcode" :text="value" size="135"></qrcode>
  <br />
  <el-button @click="saveImg">下载二维码</el-button>
</template>

<script setup>
  import qrcode from 'qrcode.vue'
  import code_logo from '../../assets/vue.svg'

  const props = defineProps({
    value: {
      type: String,
      default: 'https://www.baidu.com/'
    }
  })

  let logoSrc = code_logo

  function saveImg() {
    let picData = document.getElementById("qrcode")
    let a = document.createElement("a");
    a.href = picData.src;
    a.download = "qrcode.png";
    a.click();
  }
</script>

请注意，以上代码只是一个示例，具体的实现方式可能会根据你的实际需求和项目配置而有所不同。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3项目生成并下载二维码，关于vue-qr.vue与qrcode.vue插件之间的区别](https://blog.csdn.net/qq_51758070/article/details/128232266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]