# @dm0104x/vue-countup-v3

> A Vue 3 component for CountUp

Latest version **0.0.8** (published 2023-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dm0104x/vue-countup-v3
pnpm add @dm0104x/vue-countup-v3
yarn add @dm0104x/vue-countup-v3
bun add @dm0104x/vue-countup-v3
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2023-12-08 |
| First published | 2023-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 126.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | yoke |
| Maintainers | dm0104x |
| Keywords | vue3, countup, vue-countup, library |

## Links

- npm: https://www.npmjs.com/package/@dm0104x/vue-countup-v3
- Repository: https://github.com/yoke0104x/vue-countup-v3
- Homepage: https://yoke0104x.github.io/vue-countup-v3/
- Issues: https://github.com/yoke0104x/vue-countup-v3/issues
- npm.io page: https://npm.io/package/@dm0104x/vue-countup-v3

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.3.8
- [countup.js](https://npm.io/package/countup.js.md) ^2.8.0
- [@types/node](https://npm.io/package/@types/node.md) ^20.10.3

## Recent versions

- 0.0.8 (latest) — 2023-12-08
- 0.0.7 — 2023-12-08
- 0.0.6 — 2023-12-08
- 0.0.5 — 2023-12-08
- 0.0.4 — 2023-12-07
- 0.0.3 — 2023-12-07
- 0.0.2 — 2023-12-07
- 0.0.1 — 2023-12-07

## README

# 如何使用vue-countup-v3 ？
## 1.安装
```
npm i @dm0104x/vue-countup-v3
```
## 2.引入
```
import VueCountUp from '@dm0104x/vue-countup-v3'
```
## 3.使用
```
<VueCountUp :endVal="endVal" :isAutoDecimalPlaces='0' :options="options"></VueCountUp>
```
## 4.参数
```
endVal:目标值
options:配置项
isAutoDecimalPlaces:是否自动计算小数位数
```
## 5.配置项
```
{
    startVal: 0, // 开始值
    decimalPlaces: 0, // 小数位数
    duration: 2, // 动画持续时间
    useEasing: true, // 是否使用缓和效果
    useGrouping: true, // 是否使用分组
    smartEasingThreshold: 999, // 动画阈值
    smartEasingAmount: 333, // 动画阈值
    separator: ',', // 分隔符
    decimal: '.', // 小数点
    prefix: '', // 前缀
    suffix: '' // 后缀
}
```
## 6.完整示例
```
<template>
  <div id="app">
    <VueCountUp :endVal="endVal" :options="options"></VueCountUp>
  </div>
</template>
```

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