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>
|