From 606cb753c4401aedbb948919be9efae14601a9d6 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Sun, 14 May 2023 12:09:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=A0=E7=BF=BB?=
 =?UTF-8?q?=E7=89=8C=E5=80=BC=E5=8F=98=E5=8C=96=E5=A4=AA=E5=BF=AB=EF=BC=8C?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF=E7=9A=84?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pages/Flipper/index.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Flipper/index.vue b/src/components/Pages/Flipper/index.vue
index 9b2c6282..122f6d59 100644
--- a/src/components/Pages/Flipper/index.vue
+++ b/src/components/Pages/Flipper/index.vue
@@ -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>
@@ -7,7 +7,7 @@
 
 <script lang="ts" setup>
 import { ref, PropType, watch } from 'vue'
-import { FlipType }  from './index'
+import { FlipType } from './index'
 
 const props = defineProps({
   flipType: {
@@ -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;