1.先安装相应的插件
npm install lottie-web --save
2.引入插件(我这里是局部引入的)
import lottieWeb from 'lottie-web'
3.使用,整体代码如下,我这里是引入的本地JSON文件
<template lang="pug">
.lottie
.lottie-box(ref="lottie", style="height: 80px; width: 80px;")
</template>
<script>
import lottieWeb from 'lottie-web';
import * as animationData from '@/constant/animation.json'
export default {
name: 'lottie',
mounted () {
this.handleLottie()
},
methods: {
handleLottie () {
let lottie = {
container: this.$refs.lottie, //要渲染的动画元素
renderer: 'svg', //渲染类型
loop: true, //循环播放
autoplay: true, //自动播放
animationData: animationData.default //这个default要写,不然也不显示
}
lottieWeb.loadAnimation(lottie)
}
}
}
</script>
哎,一开始我mounted里面调用方法的时候是这样写的 this.handleLottie,一直没报错但是动画也不显示,后来加上了括号就好了
其他常用方法可以看官网: https://airbnb.io/lottie/#/web