使用 QR-Code-Styling 在 Vue 3 中生成二维码

使用 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 导出等，可以查阅官方文档。

📢 如果觉得有用，欢迎点赞、收藏！ 🚀