一、npm安装组件
npm i qrcode
二、引入组件
import {
ref } from 'vue';
import QRCode from 'qrcode';
三、在需要的地方放置标签
<template>
<div>
<h1>生成二维码</h1>
<input type="text" v-model="text" placeholder="请输入要生成二维码的内容" />
<button @click="generateQRCode">生成</button>
<br />
<br />
<div v-if="qrCode">
<img :src="qrCode" alt="QR Code" />
</div>
</div>
</template>
<style scoped>
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
input {
padding: 0.5rem;
font-size: 1.2rem;
border-radius: 0.25rem;
border: 1px solid #ccc;
margin-right: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1.2rem;
border-radius: 0.25rem;
border: none;
background-color: #4caf50;
color: #fff;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
margin-top: 1rem;
}
</style>
四、讲需要生成的域名放入
export default {
name: 'QRCodeGenerator',
setup() {
const text = ref('');
const qrCode = ref('');
const generateQRCode = async () => {
try {
const qrCodeDataUrl = await QRCode.toDataURL(text.value);
qrCode.value = qrCodeDataUrl;
} catch (error) {
console.error(error);
}
};
return {
text,
qrCode,
generateQRCode,
};
},
};