forked from mns/mini-skamja
60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
||
<div class="qr-container">
|
||
<h1 class="qr-title">QR-КОД</h1>
|
||
<canvas ref="qrCanvas" class="qr-code"></canvas>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcode';
|
||
|
||
export default {
|
||
name: 'QRPage',
|
||
data() {
|
||
return {
|
||
qrText: '', // Текст или ссылка для QR-кода
|
||
};
|
||
},
|
||
mounted() {
|
||
// Добавляем "https://", если его нет в URL
|
||
const currentUrl = window.location.href;
|
||
this.qrText = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
|
||
this.generateQR();
|
||
},
|
||
methods: {
|
||
async generateQR() {
|
||
try {
|
||
await QRCode.toCanvas(this.$refs.qrCanvas, this.qrText, {
|
||
width: 500,
|
||
});
|
||
} catch (error) {
|
||
console.error('Ошибка при генерации QR-кода:', error);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.qr-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
text-align: center;
|
||
}
|
||
|
||
.qr-title {
|
||
font-family: 'Arial', sans-serif;
|
||
font-size: 2rem;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.qr-code {
|
||
margin-top: 20px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
</style> |