Lottie使用

在componts下定义一个lottie组件lottie.vue

下载 lottie-web模块 npm install lottie-web --save

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div :style="style" ref="lavContainer"></div>
</template>
 
<script>
//引入模块
import lottie from 'lottie-web'
export default {
  props: {
    options: {
      type: Object,
      required: true
    },
    height: Number,
    width: Number
  },
  data() {
    return {
      style: {
        width: this.width ? `${this.width}rem` : '100%',
        height: this.height ? `${this.height}rem` : '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
          rendererSettings: this.options.rendererSettings
        }
    )
    this.$emit('animCreated', this.anim)
  }
}
</script>

在main.js中全局定义lottie组件 ( 不在全局定义lottie.vue组件时可以忽略此步骤 )

// npm install vue-lottie --save
import lottie from 'vue-lottie'

Vue.component('lottieView',lottie);

在目的组件使用json动态图

<template>
      <lottie :options="defaultOptions" :height="6.45" :width="5.1" class="lottie"/>
</template>

<script>
// 引入组件
import Lottie from '@/components/lottie.vue';
// 引入json数据
import  loading  from '@/assets/josn/loading.json';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        HeaderView,
        lottie: Lottie,
    },

    data() {
        //这里存放数据
        return {
            // 动图
            defaultOptions:{animationData:loading,loop:true,autoplay:true},
            
        };
    },
  
   
}
</script>