102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<template>
|
||
<HomeToolCard title="UUID 生成" description="生成单个或批量 UUID，支持去除中划线。" icon="Tickets">
|
||
<div class="tool-body">
|
||
<div class="control-row">
|
||
<div class="control-item">
|
||
<label class="field-label">生成数量</label>
|
||
<el-input-number v-model="count" :min="1" :max="100" />
|
||
</div>
|
||
<div class="control-item switch-item">
|
||
<label class="field-label">去除中划线</label>
|
||
<el-switch v-model="removeHyphen" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<el-button type="primary" @click="generateUuid">生成 UUID</el-button>
|
||
<el-button @click="copyResult">复制结果</el-button>
|
||
<el-button @click="clearAll">清空</el-button>
|
||
</div>
|
||
|
||
<el-input
|
||
v-model="resultText"
|
||
type="textarea"
|
||
:rows="10"
|
||
resize="none"
|
||
readonly
|
||
placeholder="生成结果会显示在这里"
|
||
/>
|
||
</div>
|
||
</HomeToolCard>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import HomeToolCard from './HomeToolCard.vue'
|
||
import { copyText, createUuidList } from '@/utils/home'
|
||
|
||
const count = ref(1)
|
||
const removeHyphen = ref(false)
|
||
const resultText = ref('')
|
||
|
||
const generateUuid = () => {
|
||
resultText.value = createUuidList(count.value, removeHyphen.value).join('\n')
|
||
}
|
||
|
||
const copyResult = async () => {
|
||
await copyText(resultText.value)
|
||
}
|
||
|
||
const clearAll = () => {
|
||
count.value = 1
|
||
removeHyphen.value = false
|
||
resultText.value = ''
|
||
}
|
||
|
||
onMounted(() => {
|
||
generateUuid()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tool-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.control-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.control-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.switch-item {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.field-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #334155;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.control-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|