mirror of
https://github.com/iLay1678/i-tools.git
synced 2025-05-23 19:17:42 +08:00
100 lines
3.9 KiB
Vue
100 lines
3.9 KiB
Vue
<template>
|
|
|
|
<head>
|
|
<title>二维码生成</title>
|
|
</head>
|
|
<div class="p-4">
|
|
<a-card class="mx-auto w-full max-w-3xl mb-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">二维码生成</h1>
|
|
</div>
|
|
<a-form :model="form" :rules="rules" ref="formRef">
|
|
<a-form-item name="text">
|
|
<a-textarea v-model:value="form.text" :rows="5" :showCount="true" placeholder="请输入要生成二维码的文本内容" maxlength="2953" />
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a-form-item label="二维码大小">
|
|
<a-input type="number" v-model:value="config.size" addon-after="px" :min="40" :max="500" />
|
|
</a-form-item>
|
|
<a-form-item label="中心图标地址">
|
|
<a-input v-model:value="config.icon" />
|
|
</a-form-item>
|
|
<a-form-item label="图标大小">
|
|
<a-input type="number" v-model:value="config.iconSize" addon-after="px" :min="20" :max="200" />
|
|
</a-form-item>
|
|
<a-form-item label="纠错等级">
|
|
<a-select v-model:value="config.errorLevel">
|
|
<a-select-option value="L">L - 低</a-select-option>
|
|
<a-select-option value="M">M - 中</a-select-option>
|
|
<a-select-option value="Q">Q - 较高</a-select-option>
|
|
<a-select-option value="H">H - 高</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="二维码颜色">
|
|
<a-input
|
|
v-model:value="config.color"
|
|
placeholder="#000000"
|
|
type="color"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="背景颜色">
|
|
<a-input
|
|
v-model:value="config.bgColor"
|
|
placeholder="背景颜色"
|
|
type="color"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="显示边框">
|
|
<a-switch v-model:checked="config.bordered" />
|
|
</a-form-item>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
<a-card v-if="form.text" class="mx-auto w-full max-w-3xl mb-8 text-center">
|
|
<div class="prose prose-sm max-w-none">
|
|
<a-space direction="vertical" align="center">
|
|
<h2 class="text-xl font-bold mb-4">生成的二维码</h2>
|
|
<a-qrcode
|
|
:value="form.text"
|
|
:icon="config.icon"
|
|
:size="config.size"
|
|
:iconSize="config.iconSize"
|
|
:color="config.color"
|
|
:bgColor="config.bgColor"
|
|
:bordered="config.bordered"
|
|
:errorLevel="config.errorLevel"
|
|
/>
|
|
</a-space>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const form = ref({
|
|
text: ''
|
|
})
|
|
|
|
const config = ref({
|
|
size: 160,
|
|
icon: '',
|
|
iconSize: 40,
|
|
color: '#000000',
|
|
bgColor: 'transparent',
|
|
bordered: true,
|
|
errorLevel: 'M'
|
|
})
|
|
|
|
const formRef = ref(null)
|
|
|
|
const rules = {
|
|
text: [{ required: true, message: '请输入要生成二维码的文本内容' }]
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|