使用 QR-Code-Styling 在 Vue 3 中生成二维码
1. 前言
二维码广泛应用于网站跳转、支付、身份认证等场景。普通的二维码较为单调，而 qr-code-styling 允许我们自定义二维码的颜色、Logo、样式，使其更具个性化。本文将介绍如何在 Vue 3 + Element Plus 中集成 qr-code-styling，并生成自定义二维码。
2. 安装 qr-code-styling
在 Vue 3 项目中，首先安装 qr-code-styling 依赖：
npm install qr-code-styling
3. 创建二维码组件
我们封装一个可复用的 QrCode.vue 组件：
<template><div><el-input v-model="text" placeholder="输入二维码内容" /><el-color-picker v-model="dotColor" /><el-button @click="generateQRCode">生成二维码</el-button><div ref="qrRef"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import QRCodeStyling from 'qr-code-styling';const qrRef = ref(null);
const text = ref('https://csdn.net');
const dotColor = ref('#000000');
let qrCode = null;const generateQRCode = () => {if (qrCode) qrRef.value.innerHTML = '';qrCode = new QRCodeStyling({width: 300,height: 300,data: text.value,dotsOptions: { color: dotColor.value, type: 'dots' },qrOptions: { errorCorrectionLevel: 'H' }});qrCode.append(qrRef.value);
};onMounted(generateQRCode);
</script>
4. 运行效果
用户可以输入文本、选择颜色，点击按钮即可生成二维码。
📌 改进点：
- 你可以增加 Logo：
imageOptions: { image: 'your-logo-url.png', crossOrigin: 'anonymous' } - 修改二维码形状：
dotsOptions.type = 'classy-rounded'
5. 结语
使用 qr-code-styling，我们可以轻松创建个性化二维码，并在 Vue 3 项目中集成。如果你需要更复杂的二维码设计，如动态内容、SVG 导出等，可以查阅官方文档。
📢 如果觉得有用，欢迎点赞、收藏！ 🚀
