forked from mns/mini-skamja
40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup>
|
|
import QRCode from 'qrcode';
|
|
|
|
// Реактивная переменная для хранения текста QR-кода
|
|
const qrText = ref('');
|
|
|
|
// Ссылка на элемент canvas для рендеринга QR-кода
|
|
const qrCanvas = ref(null);
|
|
|
|
// Генерация QR-кода
|
|
const generateQR = async () => {
|
|
try {
|
|
await QRCode.toCanvas(qrCanvas.value, qrText.value, {
|
|
width: 500,
|
|
});
|
|
} catch (error) {
|
|
console.error('Ошибка при генерации QR-кода:', error);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
const currentUrl = window.location.href;
|
|
qrText.value = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
|
|
generateQR();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Seo />
|
|
<div class="siteblock">
|
|
<div class="container text-center">
|
|
<h1 class="siteblock-title">QR-КОД</h1>
|
|
<div class="col-span-full">
|
|
<canvas class="border mx-auto" ref="qrCanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |