vue中使用qrcode生成二维码

1.安装qrcode

yarn add qrcode --save-dec

2.使用

<template>
  <div class="about">
    <el-button type="primary" @click="getCodeSrc">生成二维码</el-button>
    <img :src="codeSrc" alt="" style="width: 50px; height: 50px" />
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import QRCode from "qrcode";
// 组件挂载执行
onMounted(() => {});
let codeSrc = ref("");
const getCodeSrc = () => {
  mkScanle("666").then((res) => {
    console.log(res);
    codeSrc.value = res as string;
  });
};
const mkScanle = (text: String) => {
  return new Promise((resolve, reject) => {
    const qrCodeCanvas = document.createElement("canvas");
    qrCodeCanvas.width = 200;
    qrCodeCanvas.height = 200;
    QRCode.toCanvas(
      qrCodeCanvas,
      text,
      { width: 200, height: 200 },
      (error: any) => {
        if (error) {
          reject(error);
          ElMessage.warning("二维码生成失败!");
        } else {
          resolve(qrCodeCanvas.toDataURL("image/png"));
        }
      }
    );
  });
};
</script>