修改组件key

lib/components/decoration3/src/main.vue

@@ -2,25 +2,11 @@
   <div class="dv-decoration-3" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
 
-      <template
+      <template v-for="(point, i) in points" :key="i">
-        v-for="(point, i) in points"
+        <rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
-      >
+          :width="pointSideLength" :height="pointSideLength">
-        <rect
+          <animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
-          :key="i"
+            :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
-          :fill="mergedColor[0]"
-          :x="point[0] - halfPointSideLength"
-          :y="point[1] - halfPointSideLength"
-          :width="pointSideLength"
-          :height="pointSideLength"
-        >
-          <animate
-            v-if="Math.random() > 0.6"
-            attributeName="fill"
-            :values="`${mergedColor.join(';')}`"
-            :dur="Math.random() + 1 + 's'"
-            :begin="Math.random() * 2"
-            repeatCount="indefinite"
-          />
         </rect>
       </template>
     </svg>

lib/components/decoration6/src/main.vue

@@ -1,37 +1,16 @@
 <template>
   <div class="dv-decoration-6" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-      <template
+      <template v-for="(point, i) in points" :key="i">
-        v-for="(point, i) in points"
+        <rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth"
-      >
+          :y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
-        <rect
+          <animate attributeName="y"
-          :key="i"
-          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
-          :x="point[0] - halfRectWidth"
-          :y="point[1] - heights[i] / 2"
-          :width="rectWidth"
-          :height="heights[i]"
-        >
-          <animate
-            attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
-            :dur="`${randoms[i]}s`"
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            keyTimes="0;0.5;1"
+            begin="0s" repeatCount="indefinite" />
-            calcMode="spline"
+          <animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
+            begin="0s" repeatCount="indefinite" />
-            repeatCount="indefinite"
-          />
-          <animate
-            attributeName="height"
-            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
         </rect>
       </template>
     </svg>