public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(ui): responsive qr-code generator

Browse Source
This commit is contained in:
Corentin Thomasset 2021-05-17 23:33:50 +02:00
parent f6998f0f9a
commit fed0daf0a7
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
pages/tools/web/qrcode-generator.vue
View File

@ -1,40 +1,45 @@
<template> <template>
<ToolWrapper :config="config()"> <ToolWrapper :config="config()">
<v-text-field <v-row justify="center" align="center">
v-model="value" <v-col cols="12" lg="6" sm="12">
outlined <v-text-field
label="Data" v-model="value"
:rules="rules.value" outlined
/> label="Data"
<v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label /> :rules="rules.value"
<v-select />
v-model="level" <v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label/>
outlined <v-select
:items="levels" v-model="level"
label="Error resistance" outlined
/> :items="levels"
<v-row> label="Error resistance"
<v-col cols="12" md="6" sm="12"> />
<ColorInput v-model="fgColor" label="Foreground color" /> <v-row>
<v-col cols="12" md="6" sm="12">
<ColorInput v-model="fgColor" label="Foreground color"/>
</v-col>
<v-col cols="12" md="6" sm="12">
<ColorInput v-model="bgColor" label="Background color"/>
</v-col>
</v-row>
</v-col> </v-col>
<v-col cols="12" md="6" sm="12">
<ColorInput v-model="bgColor" label="Background color" /> <v-col cols="12" lg="6" sm="12" class="text-center mt-5 ">
<qrcode-vue
:value="value"
:size="size"
:level="level"
:background="bgColor"
:foreground="fgColor"
render-as="svg"
class-name="qrcode-wrapper"
/>
</v-col> </v-col>
</v-row> </v-row>
<div class="text-center mt-5 mb-5"> <div class="text-center mb-sm-2 mt-4">
<qrcode-vue
:value="value"
:size="size"
:level="level"
:background="bgColor"
:foreground="fgColor"
render-as="svg"
class-name="qrcode-wrapper"
/>
</div>
<div class="text-center mb-sm-2">
<v-btn class="mr-1" color="primary" @click="download('png')"> <v-btn class="mr-1" color="primary" @click="download('png')">
download as png download as png
</v-btn> </v-btn>