vue 生成二维码

// 引入 qrcode 生成库
import QRCode from 'qrcode';

export default {
  name: 'QrCodeGenerator',
  data() {
    return {
      qrText: 'https://example.com', // 要生成二维码的文本或链接
      qrCodeUrl: '' // 生成的二维码图片 URL
    };
  },
  methods: {
    generateQRCode() {
      // 使用 qrcode 库生成二维码
      QRCode.toDataURL(this.qrText)
        .then(url => {
          this.qrCodeUrl = url; // 将生成的二维码图片 URL 设置到数据属性中
        })
        .catch(error => {
          console.error('QR code generation failed:', error);
        });
    }
  },
  mounted() {
    // 组件挂载后立即生成二维码
    this.generateQRCode();
  }
};

解释说明：

1. 引入库：我们使用 qrcode 库来生成二维码。可以通过 npm 安装该库：npm install qrcode。
2. data 属性：
   • qrText: 存储要生成二维码的文本或链接，默认为 'https://example.com'。
   • qrCodeUrl: 存储生成的二维码图片的 URL。
3. methods：
   • generateQRCode: 这个方法调用 QRCode.toDataURL 来生成二维码，并将生成的图片 URL 设置到 qrCodeUrl 中。
4. mounted 钩子：组件挂载完成后立即调用 generateQRCode 方法生成二维码。

如果你需要在页面上显示二维码，可以在模板中使用 <img :src="qrCodeUrl" /> 来展示生成的二维码图片。