mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
fix: 修复因翻牌值变化太快,导致显示错误的异常
This commit is contained in:
parent
d701411547
commit
d5708546b7
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user