修改倒时计开始按钮禁用

src/components/timerMeter/components/countdown.tsx

@@ -1,49 +1,70 @@
-import { defineComponent, ref, watch, nextTick, onMounted,computed,onUnmounted } from 'vue';
+import {
+  defineComponent,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  computed,
+  onUnmounted
+} from 'vue';
 import styles from '../index.module.less';
-import { NTabs, NTabPane, NSpace, NButton, NImage, NInput, NInputNumber } from 'naive-ui';
+import {
+  NTabs,
+  NTabPane,
+  NSpace,
+  NButton,
+  NImage,
+  NInput,
+  NInputNumber
+} from 'naive-ui';
 import { useRoute } from 'vue-router';
-import Flipper from '../modals/flipper.vue'
+import Flipper from '../modals/flipper.vue';
 import { stringify } from 'crypto-js/enc-utf8';
 import dayjs from 'dayjs';
-import playIcon from '../images/playing.png'
-import suspend from '../images/suspend.png'
-import add from '../images/add.png'
-import minus from '../images/minus.png'
-import { getSecond } from '@/utils/index'
+import playIcon from '../images/playing.png';
+import suspend from '../images/suspend.png';
+import add from '../images/add.png';
+import minus from '../images/minus.png';
+import { getSecond } from '@/utils/index';
 import soundWav from '../timer.wav';
 export default defineComponent({
   name: 'timer-countdown',
   setup() {
-    const activeTab = ref('positive');  //countdown
+    const activeTab = ref('positive'); //countdown
     const route = useRoute();
     // const flipperHour1 = ref()
     // const flipperHour2 = ref()
-    const flipperMinute1 = ref()
-    const flipperMinute2 = ref()
-    const flipperSecond1 = ref()
-    const flipperSecond2 = ref()
-    const timer = ref(null as any)
-    const nowTimer = ref(null) as any
-    const nowDate = ref(new Date) as any
+    const flipperMinute1 = ref();
+    const flipperMinute2 = ref();
+    const flipperSecond1 = ref();
+    const flipperSecond2 = ref();
+    const timer = ref(null as any);
+    const nowTimer = ref(null) as any;
+    const nowDate = ref(new Date()) as any;
     nowTimer.value = setInterval(() => {
-      nowDate.value = new Date()
-    }, 1000)
-    const count = ref(0)
-    const mine = ref(0)
-    const second = ref(0)
-    const isPlaying = ref(false)
+      nowDate.value = new Date();
+    }, 1000);
+    const count = ref(0);
+    const mine = ref(0);
+    const second = ref(0);
+    const isPlaying = ref(false);
     // flipperHour1, flipperHour2,
-    const flipObjs = ref([flipperMinute1, flipperMinute2, flipperSecond1, flipperSecond2]) as any
+    const flipObjs = ref([
+      flipperMinute1,
+      flipperMinute2,
+      flipperSecond1,
+      flipperSecond2
+    ]) as any;
     const init = () => {
-      const now = new Date()
-      const nowTimeStr = '0000'
+      const now = new Date();
+      const nowTimeStr = '0000';
       mine.value = 0;
       second.value = 0;
       for (let i = 0; i < flipObjs.value.length; i++) {
-        flipObjs.value[i].value.setFront(nowTimeStr[i])
+        flipObjs.value[i].value.setFront(nowTimeStr[i]);
       }
-    }
-    const soundVIdeo = new Audio(soundWav)
+    };
+    const soundVIdeo = new Audio(soundWav);
     const formatDate = (date: Date, dateFormat: string) => {
       /* 单独格式化年份，根据y的字符数量输出年份
      * 例如：yyyy => 2019
@@ -54,7 +75,7 @@ export default defineComponent({
         dateFormat = dateFormat.replace(
           RegExp.$1,
           (date.getFullYear() + '').substr(4 - RegExp.$1.length)
-        )
+        );
       }
       // 格式化月、日、时、分、秒
       const o = {
@@ -63,11 +84,11 @@ export default defineComponent({
         'h+': date.getHours(),
         'i+': date.getMinutes(),
         's+': date.getSeconds()
-      } as any
+      } as any;
       for (const k in o) {
         if (new RegExp(`(${k})`).test(dateFormat)) {
           // 取出对应的值
-          const str = o[k] + ''
+          const str = o[k] + '';
           /* 根据设置的格式，输出对应的字符
            * 例如: 早上8时，hh => 08，h => 8
            * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
@@ -76,167 +97,147 @@ export default defineComponent({
           dateFormat = dateFormat.replace(
             RegExp.$1,
             RegExp.$1.length === 1 ? str : padLeftZero(str)
-          )
+          );
         }
       }
-      return dateFormat
-    }
+      return dateFormat;
+    };
     const padLeftZero = (str: string) => {
-      return ('00' + str).substr(str.length)
-    }
+      return ('00' + str).substr(str.length);
+    };
 
     const run = () => {
       timer.value = setInterval(() => {
         // 获取当前时间
-        const now = new Date()
-        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss')
-        const nextTimeStr = formatDate(now, 'iiss')
-        console.log(nowTimeStr, nextTimeStr)
+        const now = new Date();
+        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss');
+        const nextTimeStr = formatDate(now, 'iiss');
+        console.log(nowTimeStr, nextTimeStr);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (nowTimeStr[i] === nextTimeStr[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(
-            nowTimeStr[i],
-            nextTimeStr[i]
-          )
+          flipObjs.value[i].value.flipDown(nowTimeStr[i], nextTimeStr[i]);
         }
-      }, 1000)
-
-    }
+      }, 1000);
+    };
     const startTimer = () => {
       isPlaying.value = true;
       timer.value = setInterval(() => {
         // 获取当前时间
-        const lastStr = getSecond(count.value)
-        if(count.value == 4){
-          soundVIdeo.play()
+        const lastStr = getSecond(count.value);
+        if (count.value == 4) {
+          soundVIdeo.play();
         }
-        if( count.value <= 0){
-          onReset()
-          return
+        if (count.value <= 0) {
+          onReset();
+          return;
         }
-        count.value--
+        count.value--;
 
-        const str = getSecond(count.value)
+        const str = getSecond(count.value);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (lastStr[i] === str[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(lastStr[i], str[i])
+          flipObjs.value[i].value.flipDown(lastStr[i], str[i]);
         }
-      }, 1000)
-    }
+      }, 1000);
+    };
 
     const suspendNum = () => {
       isPlaying.value = false;
       soundVIdeo.currentTime = 0;
       soundVIdeo.pause();
       if (timer.value) {
-        clearInterval(timer.value)
-        timer.value = null
+        clearInterval(timer.value);
+        timer.value = null;
       }
-    }
+    };
     const onReset = () => {
-
-      suspendNum()
-      count.value = 0
+      suspendNum();
+      count.value = 0;
       soundVIdeo.currentTime = 0;
       soundVIdeo.pause();
       setTimeout(() => {
-        init()
-      }, 600)
-
-    }
+        init();
+      }, 600);
+    };
     onMounted(() => {
       nextTick(() => {
-        init()
+        init();
         // run()
-      })
-
-    })
-    onUnmounted(()=>{
-      soundVIdeo.pause()
-    })
-   const addSecondTimer = (num:number)=>{
-
-
-    const lastStr = getSecond(count.value)
-    count.value+=num
-    count.value >3599?count.value = 3599: count.value
-    const str = getSecond(count.value)
-    for (let i = 0; i < flipObjs.value.length; i++) {
-      if (lastStr[i] === str[i]) {
-        continue
-      }
-      flipObjs.value[i].value.flipDown(lastStr[i], str[i])
-    }
-    mine.value = Math.floor(count.value / 60)
-    second.value = Math.floor(count.value % 60)
-
-   }
-  const minusSecondTimer = (num:number)=>{
-
-      const lastStr = getSecond(count.value)
-      count.value -=num
-      count.value <0?count.value = 0: count.value
-      const str = getSecond(count.value)
+      });
+    });
+    onUnmounted(() => {
+      soundVIdeo.pause();
+    });
+    const addSecondTimer = (num: number) => {
+      const lastStr = getSecond(count.value);
+      count.value += num;
+      count.value > 3599 ? (count.value = 3599) : count.value;
+      const str = getSecond(count.value);
       for (let i = 0; i < flipObjs.value.length; i++) {
         if (lastStr[i] === str[i]) {
-          continue
+          continue;
         }
-        flipObjs.value[i].value.flipUp(lastStr[i], str[i])
+        flipObjs.value[i].value.flipDown(lastStr[i], str[i]);
       }
-       mine.value = Math.floor(count.value / 60)
-      second.value = Math.floor(count.value % 60)
-
-
-
-
-  }
-
-  const updateMin = ()=>{
-
-    setTimeout(()=>{
-      console.log(mine.value, count.value)
-      const lastStr = getSecond(count.value)
-      count.value = mine.value*60+second.value
-      const str = getSecond(count.value)
-      console.log(str,lastStr)
-          for (let i = 0; i < flipObjs.value.length; i++) {
+      mine.value = Math.floor(count.value / 60);
+      second.value = Math.floor(count.value % 60);
+    };
+    const minusSecondTimer = (num: number) => {
+      const lastStr = getSecond(count.value);
+      count.value -= num;
+      count.value < 0 ? (count.value = 0) : count.value;
+      const str = getSecond(count.value);
+      for (let i = 0; i < flipObjs.value.length; i++) {
         if (lastStr[i] === str[i]) {
-          continue
+          continue;
         }
-        flipObjs.value[i].value.flipUp(lastStr[i], str[i])
+        flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
       }
-    },600)
-
+      mine.value = Math.floor(count.value / 60);
+      second.value = Math.floor(count.value % 60);
+    };
 
-
-  }
-  const updateSecond=()=>{
-    setTimeout(()=>{
-      console.log(mine.value)
-      const lastStr = getSecond( count.value)
-      count.value = mine.value*60+second.value
-      const str = getSecond(count.value)
-          for (let i = 0; i < flipObjs.value.length; i++) {
-        if (lastStr[i] === str[i]) {
-          continue
+    const updateMin = () => {
+      setTimeout(() => {
+        console.log(mine.value, count.value);
+        const lastStr = getSecond(count.value);
+        count.value = mine.value * 60 + second.value;
+        const str = getSecond(count.value);
+        console.log(str, lastStr);
+        for (let i = 0; i < flipObjs.value.length; i++) {
+          if (lastStr[i] === str[i]) {
+            continue;
+          }
+          flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
         }
-        flipObjs.value[i].value.flipUp(lastStr[i], str[i])
+      }, 600);
+    };
+    const updateSecond = () => {
+      setTimeout(() => {
+        console.log(mine.value);
+        const lastStr = getSecond(count.value);
+        count.value = mine.value * 60 + second.value;
+        const str = getSecond(count.value);
+        for (let i = 0; i < flipObjs.value.length; i++) {
+          if (lastStr[i] === str[i]) {
+            continue;
+          }
+          flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
+        }
+      }, 600);
+    };
+
+    watch(
+      () => count.value,
+      val => {
+        mine.value = Math.floor(val / 60);
+        second.value = Math.floor(val % 60);
       }
-    },600)
-
-
-  }
-
-  watch(()=> count.value,(val)=>{
-
-    mine.value = Math.floor(val / 60)
-    second.value = Math.floor(val % 60)
-
-  })
+    );
     return () => (
       <div class={styles.timerItemWrap}>
         <div class={styles.timerItemInfo}>
@@ -247,19 +248,39 @@ export default defineComponent({
 
                 <div class={styles.FlipClock}>
                   <div class={styles.numberWrap}>
-                  <Flipper ref={flipperMinute1} />
-                  <Flipper ref={flipperMinute2} />
+                    <Flipper ref={flipperMinute1} />
+                    <Flipper ref={flipperMinute2} />
                   </div>
 
-                  <div  class={styles.chioseWrap} class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
-                    <img src={add} class={styles.add} alt="" onClick={()=>addSecondTimer(60)}/>
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} onBlur={updateMin} v-model:value={mine.value}></NInputNumber>
-                    <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(60)} />
+                  <div
+                    class={styles.chioseWrap}
+                    class={[
+                      styles.chioseWrap,
+                      isPlaying.value ? styles.chioseHidden : ''
+                    ]}>
+                    <img
+                      src={add}
+                      class={styles.add}
+                      alt=""
+                      onClick={() => addSecondTimer(60)}
+                    />
+                    <NInputNumber
+                      class={styles.countInput}
+                      min={0}
+                      max={59}
+                      show-button={false}
+                      onBlur={updateMin}
+                      v-model:value={mine.value}></NInputNumber>
+                    <img
+                      src={minus}
+                      class={styles.minus}
+                      alt=""
+                      onClick={() => minusSecondTimer(60)}
+                    />
                   </div>
                 </div>
               </div>
               <div class={styles.timerItemTopCore}>
-
                 <div class={styles.dot}></div>
                 <div class={styles.dot}></div>
                 <h4 class={styles.dotBtm}></h4>
@@ -268,37 +289,77 @@ export default defineComponent({
                 <h4> 秒 </h4>
                 <div class={styles.FlipClock}>
                   <div class={styles.numberWrap}>
-                  <Flipper ref={flipperSecond1} />
-                  <Flipper ref={flipperSecond2} />
+                    <Flipper ref={flipperSecond1} />
+                    <Flipper ref={flipperSecond2} />
                   </div>
 
-                  <div  class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
-                    <img src={add} class={styles.add} alt=""  onClick={()=>addSecondTimer(1)}/>
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={second.value}  onBlur={updateSecond}></NInputNumber>
-                    <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(1)} />
+                  <div
+                    class={[
+                      styles.chioseWrap,
+                      isPlaying.value ? styles.chioseHidden : ''
+                    ]}>
+                    <img
+                      src={add}
+                      class={styles.add}
+                      alt=""
+                      onClick={() => addSecondTimer(1)}
+                    />
+                    <NInputNumber
+                      class={styles.countInput}
+                      min={0}
+                      max={59}
+                      show-button={false}
+                      v-model:value={second.value}
+                      onBlur={updateSecond}></NInputNumber>
+                    <img
+                      src={minus}
+                      class={styles.minus}
+                      alt=""
+                      onClick={() => minusSecondTimer(1)}
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
-
         </div>
 
         <NSpace class={styles.btnGroupModal} justify="center">
           <NButton round onClick={() => onReset()}>
             重置
           </NButton>
-          {isPlaying.value ? <NButton round type="primary" icon-placement="right" onClick={() => suspendNum()} v-slots={{
-            default: () => <p class={styles.playText}>暂停</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={suspend}></NImage>
-          }}>
-
-          </NButton> : <NButton round type="primary" icon-placement="right" onClick={() => startTimer()} v-slots={{
-            default: () => <p class={styles.playText}>开始</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={playIcon}></NImage>
-          }}>
-          </NButton>}
-
+          {isPlaying.value ? (
+            <NButton
+              round
+              type="primary"
+              icon-placement="right"
+              onClick={() => suspendNum()}
+              v-slots={{
+                default: () => <p class={styles.playText}>暂停</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={suspend}></NImage>
+                )
+              }}></NButton>
+          ) : (
+            <NButton
+              round
+              type="primary"
+              disabled={count.value === 0}
+              icon-placement="right"
+              onClick={() => startTimer()}
+              v-slots={{
+                default: () => <p class={styles.playText}>开始</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={playIcon}></NImage>
+                )
+              }}></NButton>
+          )}
         </NSpace>
       </div>
     );