fix(lottie): 重复加载动画的时候会导致页面卡死

JX3BOX · Nov 6, 2024 · 30635e6 · 30635e6
1 parent 38818f0
commit 30635e6
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/lottie_mark.vue b/src/components/lottie_mark.vue
@@ -5,6 +5,7 @@
 
 <script>
 import lottie from "lottie-web";
+import { cloneDeep } from "lodash";
 const animations = require.context("../assets/lottie", false, /\.json$/);
 
 export default {
@@ -27,12 +28,14 @@ export default {
     },
     methods: {
         loadAnimation() {
+            const data = cloneDeep(animations(`./${this.mark}.json`));
+            const ref = this.$refs.lottieContainer;
             lottie.loadAnimation({
-                container: this.$refs.lottieContainer,
+                container: ref,
                 renderer: "svg",
                 loop: true,
                 autoplay: true,
-                animationData: animations(`./${this.mark}.json`),
+                animationData: data,
             });
         },
     },