mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 13:29:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

qr code generator

Browse source
This commit is contained in:
steffenrapp 2024-09-03 16:54:31 +00:00
parent ff46f178ce
commit 8e4a2206a7
3 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
locales/de.yml
View file

@ -299,6 +299,13 @@ tools:
description: >- description: >-
Generiere und downloade QR-Codes für eine URL oder einfach einen Text und Generiere und downloade QR-Codes für eine URL oder einfach einen Text und
passe die Hintergrund- und Vordergrundfarben an. passe die Hintergrund- und Vordergrundfarben an.
text: 'Text:'
placeholder: Dein Link oder Text...
foreground-color: 'Vordergrundfarbe:'
background-color: 'Hintergrundfarbe:'
error-resistance: 'Fehlerresistenz:'
button:
download: QR-Code herunterladen
wifi-qrcode-generator: wifi-qrcode-generator:
title: WLAN-QR-Code-Generator title: WLAN-QR-Code-Generator
description: >- description: >-

7
locales/en.yml
View file

@ -281,6 +281,13 @@ tools:
description: >- description: >-
Generate and download a QR code for a URL (or just plain text), and Generate and download a QR code for a URL (or just plain text), and
customize the background and foreground colors. customize the background and foreground colors.
error-resistance: 'Error resistance:'
background-color: 'Background color:'
foreground-color: 'Foreground color:'
text: 'Text:'
placeholder: Your link or text...
button:
download: Download QR code
wifi-qrcode-generator: wifi-qrcode-generator:
title: WiFi QR Code generator title: WiFi QR Code generator
description: Generate and download QR codes for quick connections to WiFi networks. description: Generate and download QR codes for quick connections to WiFi networks.

13
src/tools/qr-code-generator/qr-code-generator.vue
View file

@ -3,6 +3,7 @@ import type { QRCodeErrorCorrectionLevel } from 'qrcode';
import { useQRCode } from './useQRCode'; import { useQRCode } from './useQRCode';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
const { t } = useI18n();
const foreground = ref('#000000ff'); const foreground = ref('#000000ff');
const background = ref('#ffffffff'); const background = ref('#ffffffff');
const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium'); const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
@ -32,23 +33,23 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
label-position="left" label-position="left"
label-width="130px" label-width="130px"
label-align="right" label-align="right"
label="Text:" :label="t('tools.qrcode-generator.text')"
multiline multiline
rows="1" rows="1"
autosize autosize
placeholder="Your link or text..." :placeholder="t('tools.qrcode-generator.placeholder')"
mb-6 mb-6
/> />
<n-form label-width="130" label-placement="left"> <n-form label-width="130" label-placement="left">
<n-form-item label="Foreground color:"> <n-form-item :label="t('tools.qrcode-generator.foreground-color')">
<n-color-picker v-model:value="foreground" :modes="['hex']" /> <n-color-picker v-model:value="foreground" :modes="['hex']" />
</n-form-item> </n-form-item>
<n-form-item label="Background color:"> <n-form-item :label="t('tools.qrcode-generator.background-color')">
<n-color-picker v-model:value="background" :modes="['hex']" /> <n-color-picker v-model:value="background" :modes="['hex']" />
</n-form-item> </n-form-item>
<c-select <c-select
v-model:value="errorCorrectionLevel" v-model:value="errorCorrectionLevel"
label="Error resistance:" :label="t('tools.qrcode-generator.error-resistance')"
label-position="left" label-position="left"
label-width="130px" label-width="130px"
label-align="right" label-align="right"
@ -60,7 +61,7 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
<div flex flex-col items-center gap-3> <div flex flex-col items-center gap-3>
<n-image :src="qrcode" width="200" /> <n-image :src="qrcode" width="200" />
<c-button @click="download"> <c-button @click="download">
Download qr-code {{ t('tools.qrcode-generator.button.download') }}
</c-button> </c-button>
</div> </div>
</n-gi> </n-gi>