mirror of
https://github.com/tmaier/asn-qr-code-label-generator.git
synced 2026-03-14 08:33:37 +00:00
Use Qrious qr-code rendering library
This commit is contained in:
parent
6430e44e42
commit
8180c12941
1 changed files with 7 additions and 4 deletions
11
index.html
11
index.html
|
|
@ -8,7 +8,7 @@
|
||||||
rel="canonical"
|
rel="canonical"
|
||||||
href="https://tobiasmaier.info/asn-qr-code-label-generator/"
|
href="https://tobiasmaier.info/asn-qr-code-label-generator/"
|
||||||
/>
|
/>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
||||||
<script
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||||||
|
|
@ -205,10 +205,10 @@
|
||||||
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
|
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
|
||||||
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
|
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
|
||||||
>
|
>
|
||||||
<div
|
<img
|
||||||
x-effect="$el.innerHTML=''; new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L});"
|
x-effect="generateQrCode($el, label.text);"
|
||||||
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
|
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
|
||||||
></div>
|
></img>
|
||||||
<div
|
<div
|
||||||
class="flex-grow"
|
class="flex-grow"
|
||||||
:class="{
|
:class="{
|
||||||
|
|
@ -272,6 +272,9 @@
|
||||||
this.labels.push({ text });
|
this.labels.push({ text });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
generateQrCode(element, value) {
|
||||||
|
new QRious({ element, value });
|
||||||
|
},
|
||||||
printLabels() {
|
printLabels() {
|
||||||
window.print();
|
window.print();
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue