feat:当前执行动画实时更新

src/views/components/PenAnimates.vue

@@ -68,7 +68,7 @@
           <template v-if="props.pen.type">
             <div class="form-item">
               <label>动画类型</label>
-              <t-select v-model="item.lineAnimateType" placeholder="水流">
+              <t-select v-model="item.lineAnimateType" placeholder="水流"  @change="changeValue(i)">
                 <t-option :key="0" :value="0" label="水流" />
                 <t-option :key="1" :value="1" label="水珠" />
                 <t-option :key="2" :value="2" label="圆点" />
@@ -83,6 +83,7 @@
                 :show-tooltip="true"
                 :min="1"
                 :max="10"
+                @change="changeValue(i)"
               />
             </div>
             <div class="form-item mt-8">
@@ -97,6 +98,7 @@
                 :show-primary-color-preview="false"
                 :clearable="true"
                 v-model="item.animateColor"
+                @change="changeValue(i)"
               />
             </div>
             <div class="form-item mt-8">
@@ -106,6 +108,7 @@
                 theme="column"
                 :min="1"
                 placeholder="默认"
+                @change="changeValue(i)"
               />
             </div>
             <div class="form-item mt-8">
@@ -114,6 +117,7 @@
                 class="ml-8 mt-8"
                 size="small"
                 v-model="item.animateReverse"
+                @change="changeValue(i)"
               />
             </div>
             <div class="form-item mt-8">
@@ -124,6 +128,7 @@
                 :min="1"
                 placeholder="无限"
                 title="缺省无限循环播放"
+                @change="changeValue(i)"
               />
             </div>
             <div class="form-item mt-8">
@@ -546,6 +551,12 @@ const stop = () => {
   isPlaying.value = -1;
 };
 
+const changeValue = (i) => {
+  if(i===isPlaying.value){
+    play(i);
+  }
+};
+
 onUnmounted(() => {
   watcher();
 });