在vue项目中使用lottie动画

• 首先npm安装vue-lottie:

npm install vue-lottie -S

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

import * as animationData from '@/assets/json/data.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>

• 如果图片显示不出来，是因为图片路径读取不到，可以将图片文件夹放置到public目录中（参考json中的"u": "images/"的路径）