mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 23:06:14 -04:00
60 lines
No EOL
1.8 KiB
Vue
60 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<n-card>
|
|
<n-grid cols="3" x-gap="12">
|
|
<n-gi span="2">
|
|
<n-form label-width="130" label-placement="left">
|
|
<n-form-item label="Text:">
|
|
<n-input v-model:value="text" placeholder="Your link or text..." />
|
|
</n-form-item>
|
|
<n-form-item label="Foreground color:">
|
|
<n-color-picker v-model:value="foreground" :modes="['hex']" />
|
|
</n-form-item>
|
|
<n-form-item label="Background color:">
|
|
<n-color-picker v-model:value="background" :modes="['hex']" />
|
|
</n-form-item>
|
|
<n-form-item label="Error resistance:">
|
|
<n-select v-model:value="errorCorrectionLevel"
|
|
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))" />
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-space justify="center" align="center" vertical>
|
|
<n-image :src="qrcode" width="200" />
|
|
<n-button @click="download" secondary>Download qr-code</n-button>
|
|
</n-space>
|
|
</n-gi>
|
|
</n-grid>
|
|
</n-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
|
|
import { useQRCode } from './useQRCode'
|
|
import { ref } from 'vue';
|
|
import type { QRCodeErrorCorrectionLevel } from 'qrcode';
|
|
|
|
|
|
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>
|
|
|
|
<style lang="less" scoped>
|
|
</style> |