- 首先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/"的路径)