diff options
author | 2023-05-28 23:13:24 +0200 | |
---|---|---|
committer | 2023-05-28 23:29:14 +0200 | |
commit | 33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch) | |
tree | f313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/qr-code-generator/qr-code-generator.vue | |
parent | 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff) | |
download | it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.gz it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.zst it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.zip |
chore(lint): switched to a better lint config
Diffstat (limited to 'src/tools/qr-code-generator/qr-code-generator.vue')
-rw-r--r-- | src/tools/qr-code-generator/qr-code-generator.vue | 56 |
1 files changed, 29 insertions, 27 deletions
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index 12fcf11..f6ea7c8 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -1,3 +1,29 @@ +<script setup lang="ts"> +import { ref } from 'vue'; +import type { QRCodeErrorCorrectionLevel } from 'qrcode'; +import { useQRCode } from './useQRCode'; +import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; + +const foreground = ref('#000000ff'); +const background = ref('#ffffffff'); +const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium'); + +const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high']; + +const text = ref('https://it-tools.tech'); +const { qrcode } = useQRCode({ + text, + color: { + background, + foreground, + }, + errorCorrectionLevel, + options: { width: 1024 }, +}); + +const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' }); +</script> + <template> <c-card> <n-grid x-gap="12" y-gap="12" cols="1 600:3"> @@ -28,35 +54,11 @@ <n-gi> <div flex flex-col items-center gap-3> <n-image :src="qrcode" width="200" /> - <c-button @click="download"> Download qr-code </c-button> + <c-button @click="download"> + Download qr-code + </c-button> </div> </n-gi> </n-grid> </c-card> </template> - -<script setup lang="ts"> -import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; -import { ref } from 'vue'; -import type { QRCodeErrorCorrectionLevel } from 'qrcode'; -import { useQRCode } from './useQRCode'; - -const foreground = ref('#000000ff'); -const background = ref('#ffffffff'); -const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium'); - -const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high']; - -const text = ref('https://it-tools.tech'); -const { qrcode } = useQRCode({ - text, - color: { - background, - foreground, - }, - errorCorrectionLevel, - options: { width: 1024 }, -}); - -const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' }); -</script> |