Skip to content

Added parameter: size, used to specify the size of the split block. #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added parameter: size, used to specify the size of the split block. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
357eab8
Added parameter: size, used to specify the size of the split block.
adinlead Oct 29, 2024
e0fb189
修改工程名为vue-count2
adinlead Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 38 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,41 @@

> It's a vue component that will count to a target number at a specified duration

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo)
[![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to)
[![npm](https://img.shields.io/npm/dm/vue-count-to.svg)](https://npmcharts.com/compare/vue-count-to)
[![minified](https://badgen.net/bundlephobia/min/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)
[![gzip](https://badgen.net/bundlephobia/minzip/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)

vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself.
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo)
[![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to)
[![npm](https://img.shields.io/npm/dm/vue-count-to.svg)](https://npmcharts.com/compare/vue-count-to)
[![minified](https://badgen.net/bundlephobia/min/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)
[![gzip](https://badgen.net/bundlephobia/minzip/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)

vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself.
You can set startVal and endVal ,it will automatic judge count up or count down.
It is support vue-ssr.
It is learn from countUp.js;

## [Try the demo](http://panjiachen.github.io/countTo/demo/)

### How to use?

```bash
npm install vue-count-to
npm install vue-count2
```

### Example

```vue

<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
import countTo from 'vue-count-to';
import countTo from 'vue-count2';

export default {
components: { countTo },
data () {
data() {
return {
startVal: 0,
endVal: 2017
Expand All @@ -42,36 +45,37 @@ npm install vue-count-to
}
</script>
```

demo:

![demo](https://github.com/PanJiaChen/vue-countTo/blob/master/countDemo.gif)

Use CDN Script: [demo](https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html)



### Options
| Property | Description | type | default |
| ----------------- | ---------------- | :--------: | :----------: |
| startVal | the value you want to begin at |Number| 0 |
| endVal | the value you want to arrive at |Number | 2017 |
| duration | duration in millisecond | Number | 3000 |
| autoplay | when mounted autoplay | Boolean | true |
| decimals | the number of decimal places to show | Number | 0 |
| decimal | the split decimal | String | . |
| separator | the separator | String | , |
| prefix | the prefix | String | '' |
| suffix | the suffix | String | '' |
| useEasing | is use easing function | Boolean | true |
| easingFn | the easing function | Function | — |

** notes: when autoplay:true , it will auto start when startVal or endVal change **
| Property | Description | type | default |
|-----------|--------------------------------------|:--------:|:---------:|
| startVal | the value you want to begin at | Number | 0 |
| endVal | the value you want to arrive at | Number | 2017 |
| duration | duration in millisecond | Number | 3000 |
| autoplay | when mounted autoplay | Boolean | true |
| decimals | the number of decimal places to show | Number | 0 |
| decimal | the split decimal | String | . |
| separator | the separator | String | , |
| size | the size of split block | Number | 3 |
| prefix | the prefix | String | '' |
| suffix | the suffix | String | '' |
| useEasing | is use easing function | Boolean | true |
| easingFn | the easing function | Function | — |

** notes: when autoplay:true , it will auto start when startVal or endVal change **

### Functions
| Function Name | Description |
| :--------: | ----- |
| mountedCallback | when mounted will emit mountedCallback |
| start | start the countTo |
| pause | pause the countTo |
| reset | reset the countTo |

| Function Name | Description |
|:---------------:|-----------------------------------------|
| mountedCallback | when mounted will emit mountedCallback |
| start | start the countTo |
| pause | pause the countTo |
| reset | reset the countTo |
Loading