1)安装vue-lottie插件
npm install vue-lottie --save
2)在需要的组件中引入lottie,并引入data.json文件
import Lottie from 'vue-lottie'
import * as Anim from '../assets/json/lottie'
export default {
components:{Lottie}
}
3)在组件中使用
<lottie :options="defaultOptions"
:width="414"
:height="100"
@animCreated="handleAnimation"></lottie>
4)配置lottie的参数
data(){
return{
defaultOptions:{
animationData:Anim,//要使用的json数据
render:'svg',//要渲染的形式
loop:true,//是否重复
autoplay:true,//是否自动启动
},
defaultAnim :''
}
},
methods:{
handleAnimation(anim){
this.defaultAnim = anim
}
}