官网：[LottileFiles](https://lottiefiles.com/ "LottileFiles")，需要注册登录
安装：`npm install --save vue-lottie`
如果需要重复使用，推荐写成组件，不需要重复使用的话，可以通过cdn引入，直接使用
**1.cdn引入的方式：在官网直接复制html**
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_JioBzM286M.json" background="transparent"
speed="1" style="width: 300px; height: 300px;" loop autoplay>
</lottie-player>
```
**2.在vue中组件的形式：**
```
//动画组件
<template>
<div>
<!-- lottie动画组件 -->
<lottie
:options="options"
:height="height"
:width="width"
@animCreated="handleAnimation"
/>
</div>
</template>
<script>
import lottie from "vue-lottie";//引入组件
export default {
components : {lottie},
props: {
// 宽
width : {
type : Number,
default : 200,
},
// 高
height : {
type : Number,
default : 200,
},
// 配置属性
options : {
type : Object,
default : ()=>{
return {}
}
}
},
data() {
return {
anim : null,
};
},
created() {},
methods: {
// 方法：速度、暂停、开始等
handleAnimation(anim){
this.anim = anim;
}
},
};
</script>
```
```
//引入使用自定义的组件
//动画json需求去官网下载成json格式的文件
<span style="display: inline-block">
<lottieAnim :options="defaultOptions" :height="200" :width="200" />
</span>
<script>
import lottieAnim from "@/components/lottie/index";//引入组件
import * as lottieJson from "../assets/lottieJson/129188-planning-poker-pup.json"; //lottie动画json
data() {
return {
//lottie配置
defaultOptions: {
animationData: lottieJson.default /*文件资源*/,
},
}
}
</script>
```
