vue生成二维码

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

export default {
  data() {
    return {
      qrCodeUrl: ''
    };
  },
  methods: {
    // 生成二维码的方法
    generateQRCode(text) {
      // 使用 qrcode 库生成二维码，并将结果赋值给 qrCodeUrl
      QRCode.toDataURL(text, (err, url) => {
        if (err) {
          console.error('生成二维码失败', err);
          return;
        }
        this.qrCodeUrl = url;
      });
    }
  },
  mounted() {
    // 组件挂载后调用生成二维码的方法
    this.generateQRCode('https://example.com');
  }
};

解释说明：

1. 引入库：我们使用 qrcode 库来生成二维码。你可以通过 npm 安装该库：npm install qrcode。
2. data：定义了一个 qrCodeUrl 变量，用于存储生成的二维码图片的 URL。
3. generateQRCode 方法：接收一个文本参数（通常是 URL），并使用 QRCode.toDataURL 方法生成二维码图片的 Base64 编码 URL。
4. mounted 钩子：当组件挂载完成后，调用 generateQRCode 方法生成二维码。

这样你就可以在 Vue 组件中生成并显示二维码了。