在添加动画的时候考虑到交互效果，需要鼠标移入时，再进行动画播放，鼠标移出后，动画停止，封装一下以便于进行复用。

/**
* @Author: 858834013@qq.com
* @Name: lottiePlay
* @Date: 2022-08-24
* @Desc: 动画播放组件
*/
<template>
  <div @mouseover="getPlay" @mouseleave="getStop" ref="lottie" class="lottie">

  </div>
</template>

<script>
import lottie from 'lottie-web'

export default {
  props: {
    width: {
      type: Number,
      value: 100
    },
    canvasId: {
      type: String,
      default: 'canvasId'
    },
    height: {
      type: Number,
      value: 100
    },
    renderer: {
      type: String,
      value: 'svg'
    },
    path: {
      type: String | Object,
      observer: function observer() {
        this.intLottie();
      }
    }
  },
  mounted() {
    this.intLottie();
  },
  data() {
    return {
      lottie: null
    }
  },
  methods: {
    intLottie() {
      // 渲染主图按钮动画
      var that = this;
      that.lottie = lottie.loadAnimation({
        container: this.$refs.lottie, // 包含动画的dom元素
        renderer: this.renderer, // 渲染出来的是什么格式
        loop: true, // 循环播放
        autoplay: false, // 自动播放
        animationData: this.path
      });
    },
    getPlay() {
      var that = this;
      that.lottie.play()
    },
    getStop() {
      var that = this;
      that.lottie.stop()
    },
    destory: function destory() {
      if (this.lottie) {
        this.lottie.destroy();
        this.lottie = null;
      }
    }
  },
  onUnload() {
    this.destory();
  }
}
</script>

<style>
.lottie {
  width: 100%;
  height: 100%;
}
</style>