在vue项目中使用lottie动画

首先npm安装vue-lottie:

npm install vue-lottie -S

在需要使用的组件里引用lottie动画的json文件：

import * as animationData from '@/assets/json/loading.json'
import Lottie from 'vue-lottie/src/lottie.vue'

注册到组件里：

data(){
  return {
    defaultOptions:{
      animationData:animationData.default
    }
  }
},
components:{
  Lottie
},
methods:{
  handleAnimation(anim){
	this.anim = anim
  }
}

在template里使用Lottie组件：

<template>
  <Lottie :options="defaultOptions" :height="26" :width="26" @animCreated="handleAnimation"/>
</template>

最后就能得到json文件的动画效果：