64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import { reactive } from 'vue'
|
||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||
// import { copy } from '@/utils/string'
|
||
const info = reactive({
|
||
title: "生成随机数",
|
||
startNum: 1,
|
||
endNum: 100,
|
||
resNum: 0,
|
||
genStatus: false,
|
||
})
|
||
|
||
const random = () => {
|
||
info.genStatus = true
|
||
let count = 0
|
||
const genInterval = setInterval(() => {
|
||
info.resNum = Math.floor(Math.random() * (info.endNum - info.startNum + 1)) + info.startNum;
|
||
count++
|
||
if (count > 10) {
|
||
clearTimeout(genInterval)
|
||
info.genStatus = false
|
||
}
|
||
}, 50)
|
||
}
|
||
|
||
//copy
|
||
// const copyRes = async (resStr: string) => {
|
||
// copy(resStr)
|
||
// }
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col mt-3 flex-1">
|
||
<DetailHeader :title="info.title"></DetailHeader>
|
||
|
||
<div class="flex flex-col items-center p-4 rounded-2xl bg-white">
|
||
<div>
|
||
<el-input-number v-model="info.startNum" :min="0" size="large"/>
|
||
<el-input-number v-model="info.endNum" :min="0" size="large" class="ml-5"/>
|
||
</div>
|
||
|
||
<div class="h-60 text-8xl leading-[15rem]">
|
||
{{ info.resNum }}
|
||
</div>
|
||
|
||
<div>
|
||
<el-button @click="random" type="primary" size="large" v-if="!info.genStatus">生成</el-button>
|
||
<el-button @click="random" type="primary" size="large" disabled v-else>生成...</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- desc -->
|
||
<ToolDetail title="描述">
|
||
<el-text>
|
||
可定制范围内进行随机数字，可用于抽奖、点名等用途
|
||
</el-text>
|
||
</ToolDetail>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style> |