danvics/Sink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from MineraleYT/qrcode

Browse source 
Add QR code download button
This commit is contained in:
MinerAle 2025-02-24 21:13:28 +01:00 committed by GitHub
commit f562ef0bab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
components/dashboard/links/QRCode.vue
View file

@ -1,4 +1,6 @@
<script setup> <script setup>
import { Button } from '#components'
import { Download } from 'lucide-vue-next'
import QRCodeStyling from 'qr-code-styling' import QRCodeStyling from 'qr-code-styling'
const props = defineProps({ const props = defineProps({
@ -68,14 +70,28 @@ const options = {
const qrCode = new QRCodeStyling(options) const qrCode = new QRCodeStyling(options)
const qrCodeEl = ref(null) const qrCodeEl = ref(null)
function downloadQRCode() {
const slug = props.data.split('/').pop()
qrCode.download({
extension: 'png',
name: `qr_${slug}`,
})
}
onMounted(() => { onMounted(() => {
qrCode.append(qrCodeEl.value) qrCode.append(qrCodeEl.value)
}) })
</script> </script>
<template> <template>
<div <div class="flex flex-col items-center gap-4">
ref="qrCodeEl" <div
:data-text="data" ref="qrCodeEl"
/> :data-text="data"
/>
<Button variant="outline" @click="downloadQRCode">
<Download class="w-4 h-4 mr-2" />
Download QR Code
</Button>
</div>
</template> </template>