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

<template>
  <lottie-animation :options="defaultOptions" />
</template>

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

<style></style>