fix: 修复因翻牌值变化太快,导致显示错误的异常

This commit is contained in:
tnt group 2023-05-14 12:09:38 +08:00
parent 01be79ee9a
commit 606cb753c4

View File

@ -1,5 +1,5 @@
<template>
<div class="go-Flipper" :class="[flipType, { go: isFlipping }]">
<div class="go-flipper" :class="[flipType, { go: isFlipping }]">
<div class="digital front" :data-front="frontTextFromData"></div>
<div class="digital back" :data-back="backTextFromData"></div>
</div>
@ -50,19 +50,26 @@ const isFlipping = ref(false)
const frontTextFromData = ref(props.count || 0)
const backTextFromData = ref(props.count || 0)
let timeoutID: any = 0
//
const flip = (front: string | number, back: string | number) => {
//
if (isFlipping.value) return
//
backTextFromData.value = back
frontTextFromData.value = front
//
if (isFlipping.value) {
isFlipping.value = false //
clearTimeout(timeoutID) //
flip(front, back) //
return
}
// true
isFlipping.value = true
//
setTimeout(() => {
timeoutID = setTimeout(() => {
isFlipping.value = false // false
frontTextFromData.value = back
}, props.duration)
@ -125,7 +132,7 @@ $lineColor: #4a9ef8;
}
// #endregion
.go-Flipper {
.go-flipper {
display: inline-block;
position: relative;
width: $width;