vue3-ts-qrcode ：安装及使用记录 / 配置项 / 效果展示

一、安装 qrcode 库

pnpm install qrcode

二、解决类型声明问题

pnpm install --save-dev @types/qrcode

三、集成组件

<template>
  <div>
    <canvas ref="canvasRef"></canvas>
    <!-- 或者使用 img 标签 -->
    <!-- <img :src="qrCodeImage" alt="QR Code" /> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';

const canvasRef = ref<HTMLCanvasElement | null>(null);
// 如果使用 img 标签，可以这样定义
// const qrCodeImage = ref('');

onMounted(() => {
  if (canvasRef.value) {
    QRCode.toCanvas(
      canvasRef.value,
      'https://www.example.com', // 要生成二维码的内容
      {
        width: 200, // 二维码宽度
      },
      (error) => {
        if (error) {
          console.error('生成二维码失败:', error);
        } else {
          console.log('二维码生成成功');
        }
      }
    );
  }

  // 如果使用 img 标签，可以这样生成 data URL
  // QRCode.toDataURL(
  //   'https://www.example.com',
  //   {
  //     width: 200,
  //   },
  //   (error, url) => {
  //     if (error) {
  //       console.error('生成二维码失败:', error);
  //     } else {
  //       qrCodeImage.value = url;
  //     }
  //   }
  // );
});
</script>

四、页面使用

<template>
  <m-qrcode/>
</template>

<script setup lang="ts">

// 事件 暂无需要

// 数据
const data = ref({
  qrcode: 'hello'
})
// 配置/模板
const config: any = {
  type: 'qrcode',
  label: '二维码', // item的名字--用于展示
  field: 'qrcode', // 字段--用于提交数据
  style: {
    // 样式--具体的样式
    width: '200px', // 宽度--具体的样式
    height: '200px' // 高度--具体的样式
  },
  rules: [], // 校验规则
  attrs: {
    // 属性--具体的属性
    show: true, // 是否显示item
    required: true, // 是否必填
    placeholder: '', // 占位符
    disabled: false, // 是否禁用
  }
}
</script>

<style scoped>
</style>

五、展示效果

六、qrcode 配置选项

配置选项	类型	默认值	说明
version	number	自动选择	二维码的版本（尺寸），范围从 1 到 40。如果不指定，库会自动选择合适的版本。
errorCorrectionLevel	string	'L'	纠错级别，可选值有： - 'L'：7% 的字码可被修复。 - 'M'：15% 的字码可被修复。 - 'Q'：25% 的字码可被修复。 - 'H'：30% 的字码可被修复。
type	string	'canvas'（toCanvas）或 'image/png'（toDataURL）	生成的二维码类型，对于 toCanvas 通常是 'canvas'，对于 toDataURL 通常是 'image/png'，也可以是其他图像格式如 'image/jpeg'。
width	number	自动计算	二维码的宽度（像素）。如果不指定，库会根据内容和版本自动计算。
height	number	自动计算	二维码的高度（像素）。如果不指定，库会根据内容和版本自动计算。
color.dark	string	'#000000'	二维码模块（黑色部分）的颜色，可以是十六进制颜色码、RGB 或其他 CSS 颜色值。
color.light	string	'#ffffff'	二维码背景（白色部分）的颜色，可以是十六进制颜色码、RGB 或其他 CSS 颜色值。
margin	number	4	二维码周围的空白边距（模块数量的倍数）。
scale	number	1	缩放比例，用于调整二维码的尺寸。
quality	number	0.925	当 type 为 'image/jpeg' 时，用于设置 JPEG 图像的质量，范围从 0 到 1。

import QRCode from 'qrcode';

const options = {
  version: 5,
  errorCorrectionLevel: 'H',
  type: 'image/png',
  width: 300,
  color: {
    dark: '#000000',
    light: '#ffffff',
  },
  margin: 2,
};

QRCode.toDataURL('hello', options, (error, url) => {
  if (error) {
    console.error('生成二维码失败:', error);
  } else {
    console.log('二维码生成成功:', url);
    // 可以将 url 设置为 img 标签的 src 属性
  }
});

七、欢迎交流指正