vue3 + ts 二维码插件

在 Vue3 中结合 TypeScript 使用二维码插件，首先你需要确保安装了 Vue、Vue Router 和一个支持 TypeScript 的二维码生成库，比如 `vue-qrcode-generator` 或者 `qrcode.react`。

1. 安装依赖：

npm install vue --save # 如果未安装 Vue
npm install vue-router --save # 用于路由管理
npm install vue-qrcode-generator # 或者 npm install qrcode.react react-dom

2. 引入 TypeScript 类型定义（tsconfig.json）：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "lib": ["DOM", "DOM.iterable", "ESNext"],
    "types": ["vue", "vue-router"], // 添加对 Vue 和 Vue Router 的类型支持
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"]
}

3. 在 Vue 组件中使用二维码插件：

import { Component, Vue } from 'vue';
import QRCode from 'vue-qrcode-generator'; // 或者 import QrReader from 'qrcode.react';

@Component({
  components: {
    QRCodeComponent: QRCode,
    // 或者如果你用的是 qrcode.react
    QrReaderComponent: QrReader
  }
})
export default class YourComponent extends Vue {
  codeToGenerate = 'https://example.com'; // 你要生成的二维码内容

  mounted() {
    this.generateQRCode();
  }

  generateQRCode() {
    // 使用插件方法生成二维码
    const qrCode = new QRCode(this.$refs.qrcodeElement, {
      text: this.codeToGenerate,
      size: 100, // 可调整二维码大小
      typeNumber: 4, // 根据需求设置二维码版本
      errorCorrectionLevel: 'L', // 错误纠正级别
    });

    // 更新 QR 代码后可能需要调用更新方法
    qrCode.update();
  }
}