一、安装 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 属性
}
});