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, // 是否显示itemrequired: 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 属性}
});

七、欢迎交流指正