细节优化

src/components/ShootProgress.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onUnmounted } from "vue";
 const props = defineProps({
   start: {
     type: Boolean,
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  onTimeIsUp: {
+    type: Function,
+    default: () => {},
+  },
 });
 
 const barColor = ref("#fed847");
@@ -40,6 +44,8 @@ watch(
     timer.value = setInterval(() => {
       if (remain.value > 0) {
         remain.value--;
+      } else {
+        props.onTimeIsUp();
       }
     }, 1000);
   }
@@ -48,11 +54,16 @@ watch(
 watch(
   () => props.start,
   (newVal, oldVal) => {
+    if (newVal === false) {
+      if (timer.value) clearInterval(timer.value);
+    }
     if (oldVal === false && newVal === true) {
       remain.value = props.total;
       timer.value = setInterval(() => {
         if (remain.value > 0) {
           remain.value--;
+        } else {
+          props.onTimeIsUp();
         }
       }, 1000);
     } else {
@@ -60,6 +71,10 @@ watch(
     }
   }
 );
+
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
 </script>
 
 <template>
@@ -74,7 +89,7 @@ watch(
     <view>
       <view
         :style="{
-          width: `${((total - remain) / total) * 100}%`,
+          width: `${(remain / total) * 100}%`,
           backgroundColor: barColor,
           right: tips.includes('红队') ? 0 : 'unset',
         }"
@@ -116,7 +131,6 @@ watch(
   height: 20px;
   line-height: 20px;
   position: relative;
-  transition: all 0.5s linear;
   overflow: hidden;
 }
 .container > view:last-child > view {
@@ -124,7 +138,7 @@ watch(
   height: 20px;
   border-radius: 20px;
   z-index: -1;
-  transition: all 0.3s linear;
+  transition: all 1s linear;
 }
 .container > view:last-child > text {
   z-index: 1;