fix: 自定义动画组件bug修改

src/views/components/AnimateFrames.vue

@@ -59,7 +59,7 @@
                   suffix="ms"
                 />
               </div>
-              <div class="form-item mt-8" v-for="prop in frameProps[i]">
+              <div class="form-item mt-8" v-for="(prop,index) in frameProps[i]">
                 <template v-if="propDescriptions[prop]">
                   <label>
                     {{ propDescriptions[prop].label }}
@@ -97,7 +97,7 @@
                           item[propDescriptions[prop].colorModesBind]
                         )
                       "
-                      :swatch-colors = 'propDescriptions[prop].colorModes?.[0] === "monochrome"?defaultPureColor : (propDescriptions[prop].colorModesFn(
+                      :swatch-colors = 'propDescriptions[prop].colorModes?.[0] === "monochrome"?defaultPureColor : (propDescriptions[prop].colorModesFn?.(
                           item[propDescriptions[prop].colorModesBind]
                         )[0] === "monochrome"?defaultPureColor: defaultGradientColor)'
                       :show-primary-color-preview="false"
@@ -138,14 +138,14 @@
                   </div>
                 </template>
 
-                <t-icon name="close" class="hover" />
+                <t-icon name="close" class="hover" @click="closeItem(frameProps[i],index)"/>
               </div>
             </section>
           </t-collapse-panel>
         </t-collapse>
         <t-divider />
         <div class="mt-16 px-16">
-          <t-button class="w-full" @click="addFrame" style="height: 30px">
+          <t-button class="w-full" @click="addFrame()" style="height: 30px">
             添加帧
           </t-button>
         </div>
@@ -154,7 +154,7 @@
         <img src="/img/blank.png" />
         <div class="gray center">还没有动画帧</div>
         <div class="mt-8">
-          <t-button @click="addFrame" style="height: 30px">添加动画帧</t-button>
+          <t-button @click="addFrame()" style="height: 30px">添加动画帧</t-button>
         </div>
       </div>
     </div>
@@ -489,11 +489,16 @@ onMounted(() => {
   });
 });
 
+const closeItem = (frameProp,index)=>{
+  let deletePropName = frameProp.splice(index,1)
+  delete frameProp.target[deletePropName]
+}
+
 const addFrame = (i?: number) => {
   if (i == undefined) {
     i = animate.frames.length - 1;
   }
-  animate.frames.splice(i, 0, {});
+  animate.frames.splice(i+1, 0, {});
 
   openedCollapses.value = [i + 1];
   onChangeCollapse(openedCollapses.value);
@@ -508,6 +513,7 @@ const onChangeCollapse = (val: number[]) => {
     frameProps.value[i] = [];
   }
   for (const i of val) {
+    frameProps.value[i]['target'] = animate.frames[i]
     Object.keys(animate.frames[i]).forEach((key) => {
       if (key !== 'duration') {
         frameProps.value[i].push(key);