mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-14 09:57:01 -04:00
feat(tool): qr-code generator
This commit is contained in:
parent
203b6a9d73
commit
5582d75927
8 changed files with 527 additions and 21 deletions
35
src/tools/qr-code-generator/useQRCode.ts
Normal file
35
src/tools/qr-code-generator/useQRCode.ts
Normal file
|
@ -0,0 +1,35 @@
|
|||
import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode';
|
||||
import { ref, watch, type Ref } from 'vue';
|
||||
|
||||
export function useQRCode({
|
||||
text,
|
||||
color: { background, foreground },
|
||||
errorCorrectionLevel,
|
||||
options,
|
||||
}: {
|
||||
text: Ref<string>;
|
||||
color: { foreground: Ref<string>; background: Ref<string> };
|
||||
errorCorrectionLevel: Ref<QRCodeErrorCorrectionLevel>;
|
||||
options?: QRCodeToDataURLOptions;
|
||||
}) {
|
||||
const qrcode = ref('');
|
||||
|
||||
watch(
|
||||
[text, background, foreground, errorCorrectionLevel],
|
||||
async () => {
|
||||
if (text.value)
|
||||
qrcode.value = await QRCode.toDataURL(text.value, {
|
||||
color: {
|
||||
dark: foreground.value,
|
||||
light: background.value,
|
||||
...options?.color,
|
||||
},
|
||||
errorCorrectionLevel: errorCorrectionLevel.value,
|
||||
...options,
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
return { qrcode };
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue