hid_app/pages/index/LottieAnimation.vue

<template>
  <div ref="lottieContainer" class="lottie-container"></div>
</template>

<script>
import lottie from 'lottie-web';

export default {
  props: {
    animationData: {
      type: Object,
      required: true
    },
    loop: {
      type: Boolean,
      default: true
    },
    autoplay: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.initLottie();
  },
  beforeDestroy() {
    this.destroyLottie();
  },
  methods: {
    initLottie() {
      this.animation = lottie.loadAnimation({
        container: this.$refs.lottieContainer, // DOM元素
        renderer: 'svg',
        loop: this.loop,
        autoplay: this.autoplay,
        animationData: this.animationData // 动画数据
      });
    },
    destroyLottie() {
      if (this.animation) {
        this.animation.destroy(); // 销毁动画
      }
    }
  }
};
</script>

<style scoped>
.lottie-container {
  width: 100%;
  height: 100%;

}
</style>