vue 使用 qrcode

在 Vue 中使用 QRCode（二维码）可以通过安装相应的第三方库来实现。以下是一种常见的方法：

1. 首先，在你的 Vue 项目中，使用 npm 或 yarn 安装 qrcode 库：

npm install qrcode

或

yarn add qrcode

2. 在需要使用二维码的组件中，引入 qrcode 库，并创建一个方法来生成二维码：

import QRCode from 'qrcode';

export default {
  data() {
    return {
      qrCodeData: 'https://example.com', // 二维码的内容
      qrCodeImage: '', // 二维码图片的 Base64 数据
    };
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const canvas = document.createElement('canvas');
      QRCode.toCanvas(canvas, this.qrCodeData, (error) => {
        if (error) {
          console.error(error);
          return;
        }
        this.qrCodeImage = canvas.toDataURL('image/png');
      });
    },
  },
};

上述代码中，我们通过调用 `QRCode.toCanvas()` 方法，将二维码渲染到一个创建的 canvas 元素上，并将 canvas 转换为 Base64 图片数据。最后，将生成的图片数据赋值给 `qrCodeImage` 变量。

3. 在组件的模板中，使用 `qrCodeImage` 变量来显示二维码图片：

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

这样，当组件被挂载时，二维码将会生成并显示在页面上。

请注意，上述代码只是一种实现方式，你可以根据自己的需求和喜好进行调整。另外，你也可以使用其他的第三方库来生成二维码，如 vue-qriously、vue-qrcode-component 等。