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

This commit is contained in:
tnt group 2023-05-14 12:09:38 +08:00
parent d701411547
commit d5708546b7

View File

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