android-cloud-H5/components/lottie/index.vue

<template>
  <lottie-animation :options="defaultOptions"  v-on:animCreated="handleAnimation" />
</template>

<script>
import LottieAnimation from 'vue-lottie';
export default {
  props: ['data'],
  name: 'lottie',
  data() {
    return {
      defaultOptions: {},
      key: +new Date()
    };
  },
  created() {
    if (this.data.default) {
      this.data.default.assets.forEach((item) => {
        item.u = '';
        if (item.w && item.h) {
          item.p = require(`@/assets/lottie/images/${item.p}`);
        }
      });
      this.defaultOptions = {
        animationData: this.data.default,
        renderer: 'svg', //渲染方式，svg、canvas、html（轻量版仅svg渲染）
        loop: true, //是否循环播放，true表示循环，false表示不循环
        autoplay: true, //是否自动播放，true表示自动播放
      };
    }
  },
  components: {
    LottieAnimation,
  },
  methods: {
    handleAnimation(anim) {
      console.log(anim)
    }
  }
};
</script>

<style></style>