安装
import pLottie from 'paiui/packages/components/pLottie'
Vue.use(pLottie)配置
| 配置 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| loop | Boolean | false | 循环播放 |
| data | Object | {} | 数据对象 |
| path | String | '' | 数据文件json地址 |
| 事件 | |||
| DOMLoaded | 动画相关的dom已经被添加到html后触发 | ||
| data_ready | 动画相关的dom已经被添加到html后触发 | ||
| complete | 播放完成（循环播放下不会触发） | ||
| loopComplete | 当前循环下播放（循环播放/非循环播放）结束时触发 | ||
| destroy | 将在动画删除时触发 | ||
方法
| 方法名 | 定义 | 备注 |
|---|---|---|
| play | () | 播放该动画，从目前停止的帧开始播放 |
| stop | () | 停止播放该动画，回到第0帧 |
| pause | () | 暂停该动画，在当前帧停止并保持 |
| setSpeed | (speed) | speed为1表示正常速度 |
| setDirection | (direction) | 1表示正向播放，-1表示反向播放 |
通过地址加载
<p-lottie :loop="true" path="./static/lottie/500.json" style="width: 100%;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/loading.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/空.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/时钟.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/通讯录.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/成功提示.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/警告提示.json" style="width: 500px; height: 500px;"> </p-lottie>
<p-lottie :loop="true" path="./static/lottie/失败提示.json" style="width: 500px; height: 500px;"> </p-lottie>Demo样式
.p-lottie {
margin-bottom: 30px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}参考
语雀 - lottie-web
Git - lottie-web
文档更新时间: 2021-05-12 18:47 作者：管理员
