vue 封装生成二维码组件

好的，下面是一个简单的 Vue 组件，用于生成二维码：

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";

export default {
  name: "Qrcode",
  props: {
    value: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    this.generate();
  },
  methods: {
    async generate() {
      try {
        const canvas = this.$refs.qrcodeCanvas;
        const url = await QRCode.toDataURL(this.value, { width: this.size });
        const img = new Image();
        img.src = url;
        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          canvas.getContext("2d").drawImage(img, 0, 0);
        };
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

这个组件引入了一个名为 `qrcode` 的第三方库，用于生成二维码。

您可以通过 `value` 属性设置二维码的内容，通过 `size` 属性设置二维码的大小。

当组件挂载到页面上时，会自动调用 `generate` 方法生成二维码，并将其绘制到一个 `canvas` 元素上。