计时器

src/components/timerMeter/TimerMeter.vue

@@ -8,10 +8,10 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <div @click="handleMMTime(10)">
+            <div @click="handleTimeNum(600)">
               <img src="./img/upBtn.png" />
             </div>
-            <div @click="handleMMTime(1)">
+            <div @click="handleTimeNum(60)">
               <img src="./img/upBtn.png" />
             </div>
           </div>
@@ -26,12 +26,11 @@
               @update:value="(num:number)=>{
                 if(num){
                   if(num<0){
-                    mmValue=0
+                    num=0
                   }else if(num>59){
-                    mmValue=59
-                  }else{
-                    mmValue=num
+                    num=59
                   }
+                  timeNum=num * 60 + ssValue
                 }
               }"
               :show-button="false"
@@ -42,10 +41,10 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <div @click="handleMMTime(-10)">
+            <div @click="handleTimeNum(-600)">
               <img src="./img/downBtn.png" />
             </div>
-            <div @click="handleMMTime(-1)">
+            <div @click="handleTimeNum(-60)">
               <img src="./img/downBtn.png" />
             </div>
           </div>
@@ -57,10 +56,10 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <div @click="handleSSTime(10)">
+            <div @click="handleTimeNum(10)">
               <img src="./img/upBtn.png" />
             </div>
-            <div @click="handleSSTime(1)">
+            <div @click="handleTimeNum(1)">
               <img src="./img/upBtn.png" />
             </div>
           </div>
@@ -75,12 +74,11 @@
               @update:value="(num:number)=>{
                 if(num){
                   if(num<0){
-                    ssValue=0
+                    num=0
                   }else if(num>59){
-                    ssValue=59
-                  }else{
-                    ssValue=num
+                    num=59
                   }
+                  timeNum=mmValue * 60 + num
                 }
               }"
               :show-button="false"
@@ -91,10 +89,10 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <div @click="handleSSTime(-10)">
+            <div @click="handleTimeNum(-10)">
               <img src="./img/downBtn.png" />
             </div>
-            <div @click="handleSSTime(-1)">
+            <div @click="handleTimeNum(-1)">
               <img src="./img/downBtn.png" />
             </div>
           </div>
@@ -197,34 +195,14 @@ watch(timeNum, () => {
   mmValue.value = Math.floor(timeNum.value / 60);
   ssValue.value = timeNum.value % 60;
 });
-function handleMMTime(num: number) {
-  if (playState.value === 'play') return;
-  const newMmValue = mmValue.value + num;
-  if (newMmValue > 59) {
-    return;
-  }
-  if (newMmValue < 0) {
-    return;
-  }
-  mmValue.value = newMmValue;
-}
-function handleSSTime(num: number) {
-  if (playState.value === 'play') return;
-  const newSsValue = ssValue.value + num;
-  if (newSsValue > 59) {
-    return;
-  }
-  if (newSsValue < 0) {
-    return;
-  }
-  ssValue.value = newSsValue;
-}
-
 function handleTimeNum(num: number) {
   if (playState.value === 'play') return;
-  const timeNumNow = timeNum.value + num;
+  let timeNumNow = timeNum.value + num;
   if (timeNumNow >= 3599) {
-    timeNum.value = 3599;
+    timeNumNow = 3599;
+  }
+  if (timeNumNow <= 0) {
+    timeNumNow = 0;
     return;
   }
   timeNum.value = timeNumNow;
@@ -232,11 +210,9 @@ function handleTimeNum(num: number) {
 // 开始
 function handlePlay() {
   if (timeType.value === 'countdown') {
-    const timeNumNow = mmValue.value * 60 + ssValue.value;
-    if (timeNumNow <= 0) {
+    if (timeNum.value <= 0) {
       return;
     }
-    timeNum.value = timeNumNow;
     playState.value = 'play';
     handleCountdownStart();
   } else {