88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { ref,reactive } from 'vue'
|
||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||
import DiceCore from "@/components/Tools/Dice/DiceCore.vue"
|
||
// import { copy } from '@/utils/string'
|
||
const info = reactive({
|
||
title: "投骰子",
|
||
})
|
||
//骰子数量
|
||
const diceNum = ref(1)
|
||
const genStatus = ref(false)
|
||
const diceRef = ref()
|
||
const resetDiceKey = ref(0)
|
||
|
||
const shake = async () => {
|
||
genStatus.value = true
|
||
|
||
let res = await new Promise((resolve) => {
|
||
for (let i = 0; i < diceNum.value; i++) {
|
||
diceRef.value[i].throwDice()
|
||
}
|
||
resolve(true)
|
||
})
|
||
|
||
//等待执行完成
|
||
setTimeout(() => {
|
||
console.log(res)
|
||
genStatus.value = false
|
||
}, 1200)
|
||
}
|
||
|
||
//重置骰子点数
|
||
const resetDice = () => {
|
||
resetDiceKey.value++
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col mt-3 flex-1">
|
||
<DetailHeader :title="info.title"></DetailHeader>
|
||
|
||
<div class="p-4 rounded-2xl bg-white">
|
||
<view class="grow-[1.5]"></view>
|
||
<div class="flex justify-center grow-[3]">
|
||
<div class="flex flex-wrap h-96 items-center">
|
||
<!-- 骰子组件 -->
|
||
<DiceCore ref="diceRef" v-for="i in diceNum" :key="resetDiceKey" :class="[diceNum == 1 ? 'dice_full' : '', diceNum == 3 && i == 1 ? 'dice_full' : 'dice_default', diceNum == 5 && i == 3 ? 'dice_full' : 'dice_default']"/>
|
||
</div>
|
||
</div>
|
||
<div class="">
|
||
<div class="ml-5 flex justify-center">
|
||
<el-text style="">骰子数量：</el-text>
|
||
<div class="w-4/6">
|
||
<el-slider class="w-72 ml-3" v-model="diceNum" :min="1" :max="6" :step="1" blockSize="18" :showValue="true"></el-slider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-5 flex justify-center">
|
||
<el-button type="primary" class="w-48" size="large" @click="shake" v-if="!genStatus">投骰子</el-button>
|
||
<el-button type="primary" class="w-48" size="large" disabled v-else>投骰子...</el-button>
|
||
<el-button type="primary" class="w-48" size="large" @click="resetDice">重置</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- desc -->
|
||
<ToolDetail title="描述">
|
||
<el-text>
|
||
在线投骰子，骰子工具，自定义骰子数量
|
||
</el-text>
|
||
</ToolDetail>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.dice_default{
|
||
flex: 0 0 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.dice_full{
|
||
flex: 0 0 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style> |