# lottie-vue

> lottie动画vue组件，更简单的api使用，更丰富的功能。

Latest version **1.0.3** (published 2021-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install lottie-vue
pnpm add lottie-vue
yarn add lottie-vue
bun add lottie-vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-08-06 |
| First published | 2021-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | liuxin |
| Maintainers | bug_maker |
| Keywords | lottie, lottie-vue, lottie-web, lottie-web-vue, vue-lottie, vue-lottie-web, 动画, web-lottie-vue |

## Links

- npm: https://www.npmjs.com/package/lottie-vue
- npm.io page: https://npm.io/package/lottie-vue

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [lottie-web](https://npm.io/package/lottie-web.md) ^5.7.8

## Recent versions

- 1.0.3 (latest) — 2021-08-06
- 1.0.2 — 2021-05-08
- 1.0.1 — 2021-05-08
- 1.0.0 — 2021-05-08

## README

# 安装
```javascript
npm i lottie-vue
```
# 使用

```javascript
<template>
  <div>
    <h1 @click="play">点击文字或图案</h1>
    <lottie-vue 
      ref="lottieVue"
      :width="500"
      :height="500"
      :autoplay="false"
      :clickPlay="true"
      :loop="false" 
      :manualLoop="false"
      path="https://assets7.lottiefiles.com/packages/lf20_tmyg7clb.json"
      // animationData:require('您的本地json路径'),
      @onComplete="onComplete"
      @onEnterFrame="onEnterFrame"
      @onSegmentStart="onSegmentStart"
    >
    </lottie-vue>
  </div>
</template>

<script>
import LottieVue from "lottie-vue"
export default {
  components: {
    LottieVue
  },
  methods:{
    onComplete(){
      console.log("onComplete");
    },
    onEnterFrame(){
      console.log("onEnterFrame");
    },
    onSegmentStart(){
      console.log("onSegmentStart");
    },
    play(){
      this.$refs.lottieVue.play()
    }
  }
}
</script>
```
# Attributes
| 参数 |说明  |类型|可选值|默认值|
|--|--|--|--|--|
| renderer |渲染器  |String  |svg / canvas / html | svg |
|loop|循环播放|Boolean|true / false|true|
|autoplay|自动播放|Boolean|true / false|true|
|manualLoop|事件播放循环|Boolean|true / false|true|
|clickPlay|点击播放|Boolean|true / false|false|
|mousePlay|鼠标移入播放|Boolean|true / false|false|
|name|动画名称，用于 reference|-|-|-|
|animationData|json 动画数据|-|-|-|
|path|json 网络路径（与animationData互斥，animationData优先）|-|-|-|
|animationData|json 本地路径|-|-|-|
|direction|方向|Number|1：正向 / -1：反向 |1|
|speed|速度|Number|取值>0  1为倍速|1|
|width|宽度|Number|-|-|
|height|高度|Number|-|-|
# Events
| 事件名称|说明  |回调参数|
|--|--|--|
|onComplete|非循环动画执行一次触发|-|
|onLoopComplete|循环动画每执行一次触发|-|
|onEnterFrame|动画准备完毕触发|-|
|onSegmentStart|每进行一帧执行一次|-|
# Methods
| 方法名称|说明  |回调参数|
|--|--|--|
|stop|停止动画|-|
|play|播放动画|-|
|pause|暂停动画|-|
|setSpeed|设置播放速度|取值>0  1表示倍速|
|setDirection|设置播放方向|1：正向 / -1：反向|
|goToAndStop|跳到某一帧或者某一秒停止| 第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间|
|goToAndPlay|跳到某一帧或者某一秒开始播放| 第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间|
|playSegments|播放某些片段|第一个参数为数组，两个元素为开始帧和结束帧；第二个参数为Boolean，是否立即播放片段，还是等之前的动画播放完成|
|destroy|销毁动画实例|-|

###### 基于[lottie-web](https://www.npmjs.com/package/lottie-web)二次开发，丰富了一些功能，简化了api调用。

---
_Source: https://npm.io/package/lottie-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._