vue-qr 生成二维码并下载二维码

你可以使用以下步骤来使用 vue-qr 生成二维码并下载二维码：

1. 安装 vue-qr

你可以使用以下命令来安装 vue-qr：

npm install vue-qr --save

2. 在 Vue 组件中使用 vue-qr

你可以在 Vue 组件中使用 vue-qr，并传递需要生成二维码的文本作为参数：

<template>
  <div>
    <qr :text="qrText"></qr>
    <button @click="downloadQR">Download QR Code</button>
  </div>
</template>

<script>
import QR from 'vue-qr'

export default {
  components: {
    QR,
  },
  data() {
    return {
      qrText: 'https://www.example.com',
    }
  },
  methods: {
    downloadQR() {
      const canvas = document.querySelector('canvas')
      const dataURL = canvas.toDataURL('image/png')
      const link = document.createElement('a')
      link.download = 'qr-code.png'
      link.href = dataURL
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
  },
}
</script>

在上面的例子中，我们首先导入 vue-qr 并将其注册为组件。然后，我们定义了一个 data 属性 `qrText`，它包含了需要生成二维码的文本。在模板中，我们使用 `<qr>` 标签来渲染二维码。我们还添加了一个按钮，以便用户可以下载二维码。

在 `downloadQR()` 方法中，我们获取了 Canvas 元素并将其转换为 PNG 格式的数据 URL。然后，我们创建了一个 `<a>` 元素，并将其下载属性设置为 `qr-code.png`，并将其 `href` 属性设置为数据 URL。最后，我们将 `<a>` 元素添加到页面中，模拟用户单击该元素并将其从页面中删除。

3. 运行应用程序

现在，你可以运行你的应用程序并生成并下载二维码。