使用 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 依靠：

1. npm install qr-code-styling

复制代码

---

3. 创建二维码组件

我们封装一个可复用的 QrCode.vue 组件：

1. <template>
2.   <div>
3.     <el-input v-model="text" placeholder="输入二维码内容" />
4.     <el-color-picker v-model="dotColor" />
5.     <el-button @click="generateQRCode">生成二维码</el-button>
6.     <div ref="qrRef"></div>
7.   </div>
8. </template>
10. <script setup>
11. import { ref, onMounted } from 'vue';
12. import QRCodeStyling from 'qr-code-styling';
14. const qrRef = ref(null);
15. const text = ref('https://csdn.net');
16. const dotColor = ref('#000000');
17. let qrCode = null;
19. const generateQRCode = () => {
20.   if (qrCode) qrRef.value.innerHTML = '';
21.   qrCode = new QRCodeStyling({
22.     width: 300,
23.     height: 300,
24.     data: text.value,
25.     dotsOptions: { color: dotColor.value, type: 'dots' },
26.     qrOptions: { errorCorrectionLevel: 'H' }
27.   });
28.   qrCode.append(qrRef.value);
29. };
31. onMounted(generateQRCode);
32. </script>

复制代码

---

4. 运行效果

用户可以输入文本、选择颜色，点击按钮即可天生二维码。