# vue-countupjs

> Vue + CountUp.js

Latest version **1.0.0** (published 2017-09-17) · 0 weekly downloads

## Install

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

## 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.0 |
| Published | 2017-09-17 |
| First published | 2017-06-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | liyl |
| Maintainers | liyl |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [countup.js](https://npm.io/package/countup.js.md) ^1.8.5

## Recent versions

- 1.0.0 (latest) — 2017-09-17
- 0.1.3-beta.2 — 2017-06-29
- 0.1.3-beta.1 — 2017-06-29
- 0.1.3 — 2017-06-29
- 0.1.1 — 2017-06-23

## README

# vue-countupjs
>  基于 CountUp.js 的 Vue 组件, 简易数字动画跳动
>  默认使用 `window.requestAnimFrame` 动画桢进行更新跳动数字


## Installation

**使用npm安装**

```
  npm install vue-countupjs
```

**浏览器**
```html
<script src='https://unpkg.com/vue@2.3.3'></script>
<script src='https://unpkg.com/vue-countupjs'></script>
```

## Example

**webpack引用**

```html
  <div id="app"></div>
```
```javascript
import Vue from 'vue'
import VueCountUp from 'vue-countupjs'
new Vue({
  el: '#app',
  render (h) {
    return h(VueCountUp.component, {
      props: {
        start: 1,
        endt: 100
      }
    }, '')
  }
})
```

**浏览器直接引用**
```html
  <body>
    <div id="app">
      <v-countup :start-value="start" :end-value="end"></v-countup>
    </div>
    <script src='https://unpkg.com/vue@2.3.3'></script>
    <script src='https://unpkg.com/vue-countupjs'></script>
    <script>
      Vue.use(VueCountUp)
      var app = new Vue({
        data: {
          start: 1,
          end: 100
        },
        el: "#app"
      })
    </script>
  </body>
```
[jsFiddle 地址](https://jsfiddle.net/liyl/mnz95c42/)

## Documentantion

**-- tag**

default: `span`

desc: 数字的包装器


**-- startValue**

default: `0`

desc: 起始值

**-- endValue**

default: `0`

desc: 结束值

**-- decimals**

default: `0`

desc: 小数位数， 默认为 `0`

**-- duration**

default: `2`

desc: 动画持续时间， 默认为 `2` s

**-- delay**

default: `0`

desc: 延时更新时间, `0` 为不延时

**-- immediate**

default: `true`

desc: 是否立即执行动画


**-- options**

type: `object`

default:  

```javascript
{
  useEasing: true, // 缓动动画 easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // 数字分隔符
  decimal: '.', // 小数分隔符
  prefix: '', // 前缀
  suffix: '' // 后缀
}
```

desc: countup配置项

**-- animateClass**

type: `string` or `array`

required: false

desc: 执行期间动画, 执行后删除，优先级低于`animatedClass`

**-- animatedClass**

type: `string`

default: `animated`

desc: 执行前插入, 执行后删除

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