vue 二维码制作

第一步:安装qrcode库`

npm install qrcode

第二步:在组件中引入qrcode库

import qrcode from 'qrcode';

第三步:在data中添加变量储存二维码地址或者信息

data() {
  return {
    qrCodeData: ''
  };
},

第四步:在初始生命周期时生成二维码数据,将数据编译成url形式,用img标签翻译出来

mounted() {
  const qrCodeData = 'your-data'; // 替换为你需要生成二维码的数据
  qrcode.toDataURL(qrCodeData, (err, url) => {
    if (err) {
      console.error(err);
    } else {
      this.qrCodeData = url;  //将url数据在模版中用img标签来显示二维码
    }
  });
},

第五步:显示二维码

<template>
  <div>
    <img :src="qrCodeData" alt="QR Code">
  </div>
</template>