使用 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. 运行效果
用户可以输入文本、选择颜色，点击按钮即可天生二维码。
页:
[1]