vue 封装生成二维码组件并可以添加文字

好的，这里是一个 Vue 组件，可以生成带有文字的二维码：

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

<script>
import QRCode from "qrcode";

export default {
  name: "QrcodeWithText",
  props: {
    value: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 100
    },
    text: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: "#000"
    },
    textSize: {
      type: Number,
      default: 16
    }
  },
  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 + this.textSize;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
          ctx.font = `${this.textSize}px sans-serif`;
          ctx.fillStyle = this.textColor;
          ctx.textAlign = "center";
          ctx.fillText(this.text, img.width / 2, img.height + this.textSize);
        };
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

这个组件和上一个组件很相似，但是多了几个属性：

- `text`：要添加到二维码下面的文本内容。
- `textColor`：文本的颜色。
- `textSize`：文本的字体大小。

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