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
+212 −179
Open

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

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
Original file line number Diff line number Diff line change
@@ -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
@@ -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 |
290 changes: 157 additions & 133 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -2,152 +2,176 @@
<html lang="en">

<head>
<meta charset="utf-8">
<title>vue-count-to</title>
<link rel="stylesheet" href="./index.css">
<meta charset="utf-8">
<title>vue-count2</title>
<link rel="stylesheet" href="./index.css">
<style>
.num-input {
width: 6em;
}
</style>
</head>

<body>
<script src='https://unpkg.com/vue@2.2.6'></script>
<script src="../dist/vue-count-to.min.js"></script>
<a href="https://github.com/PanJiaChen/vue-countTo" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
<script src='https://unpkg.com/vue@2.2.6'></script>
<script src="../dist/vue-count2.min.js"></script>
<a href="https://github.com/PanJiaChen/vue-countTo" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#4AB7BD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div id="app">
</a>
<div id="app">
<template>
<h1>Vue CountTo</h1>
<div class='container'>
<div class="example-item">
<h3> simple example</h3>
<code>&lt;count-to :startVal=&#x27;0&#x27; :endVal=&#x27;2018&#x27; :duration=4000&gt;&lt;/count-to&gt;</code>
<count-to ref='example1' class='example1' :start-val=startVal1 :end-val='endVal1' :duration=4000></count-to>
<div class='example-btn' @click='start1'>start</div>
<div class='example-btn' @click='changeExampleEndVal'>change end-val</div>
<div class='example-btn' @click='incrementalUpdate'>incremental update</div>
</div>
<div class="example-item">
<h3> count down example</h3>
<code> &lt;count-to :startVal=&#x27;2017&#x27; :endVal=&#x27;0&#x27; :duration=8000&gt;&lt;/count-to&gt;</code>
<count-to ref='example2' class='example2' :start-val='2017' :end-val=0 :duration=8000></count-to>
<div class='example-btn' @click='start2'>start</div>
</div>
<div class="example-item">
<h3> custom example</h3>
<count-to ref='example3' class='example3' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
:separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay=false>
</count-to>
<div>
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
<label class="label" for="endValInput">endVal: <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
<label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration' name='durationInput' /></label>
<div class="startBtn example-btn" @click='start3'>start</div>
<div class="pause-resume-btn example-btn" @click='pauseResume'>pause/resume</div>
<br/>
<label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
<label class="label" for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
<label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
<label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
</div>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27; :decimals=&#x27;{{_decimals}}&#x27;
:separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
<h1>Vue CountTo</h1>
<div class='container'>
<div class="example-item">
<h3> simple example</h3>
<code>&lt;count2 :startVal=&#x27;0&#x27; :endVal=&#x27;2018&#x27;
:duration=4000&gt;&lt;/count2&gt;</code>
<count2 ref='example1' class='example1' :start-val=startVal1 :end-val='endVal1' :duration=4000></count2>
<div class='example-btn' @click='start1'>start</div>
<div class='example-btn' @click='changeExampleEndVal'>change end-val</div>
<div class='example-btn' @click='incrementalUpdate'>incremental update</div>
</div>
<div class="example-item">
<h3> count down example</h3>
<code> &lt;count2 :startVal=&#x27;2017&#x27; :endVal=&#x27;0&#x27;
:duration=8000&gt;&lt;/count2&gt;</code>
<count2 ref='example2' class='example2' :start-val='2017' :end-val=0 :duration=8000></count2>
<div class='example-btn' @click='start2'>start</div>
</div>
<div class="example-item">
<h3> custom example</h3>
<count2 ref='example3' class='example3' :start-val='_startVal' :end-val='_endVal' :duration='_duration'
:decimals='_decimals'
:separator='_separator' :size='_size' :prefix='_prefix' :suffix='_suffix' :autoplay=false>
</count2>
<div>
<label class="label" for="startValInput">startVal: <input class="num-input" type="number"
v-model.number='setStartVal'
name='startValInput'/></label>
<label class="label" for="endValInput">endVal: <input class="num-input" type="number"
v-model.number='setEndVal' name='endVaInput'/></label>
<label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration'
name='durationInput'/></label>
<div class="startBtn example-btn" @click='start3'>start</div>
<div class="pause-resume-btn example-btn" @click='pauseResume'>pause/resume</div>
<br/>
<label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals'
name='decimalsInput'/></label>
<label class="label" for="separatorInput">separator: <input v-model='setSeparator'
name='separatorInput'/></label>
<label class="label" for="sizeInput">size: <input v-model='setSize' name='sizeInput'/></label>
<label class="label" for="prefixInput">prefix: <input v-model='setPrefix'
name='prefixInput'/></label>
<label class="label" for="suffixInput">suffix: <input v-model='setSuffix'
name='suffixInput'/></label>
</div>
<code>&lt;count2 :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
:decimals=&#x27;{{_decimals}}&#x27;
:separator=&#x27;{{_separator}}&#x27; :size=&#x27;{{_size}}&#x27; :prefix=&#x27;{{_prefix}}&#x27;
:suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
</div>
</div>
</div>
</template>
</div>
<script>
var Main = {
name: 'test',
data() {
return {
setStartVal: 0,
setEndVal: 2017,
setDuration: 4000,
setDecimals: 0,
setSeparator: ',',
setSuffix: ' rmb',
setPrefix: '¥ ',
startVal1:0,
endVal1:2017
}
},
computed: {
_startVal() {
if (this.setStartVal) {
return this.setStartVal
} else {
return 0
}
},
_endVal() {
if (this.setEndVal) {
return this.setEndVal
} else {
return 0
}
},
_duration() {
if (this.setDuration) {
return this.setDuration
} else {
return 100
}
},
_decimals() {
if (this.setDecimals) {
if (this.setDecimals < 0 || this.setDecimals > 20) {
alert('digits argument must be between 0 and 20')
return 0
</div>
<script>
const Main = {
name: 'test',
data() {
return {
setStartVal: 0,
setEndVal: 20241029,
setDuration: 4000,
setDecimals: 0,
setSeparator: ',',
setSize: 3,
setSuffix: ' rmb',
setPrefix: '¥ ',
startVal1: 0,
endVal1: 2017
}
return this.setDecimals
} else {
return 0
}
},
_separator() {
return this.setSeparator
},
_suffix() {
return this.setSuffix
},
_prefix() {
return this.setPrefix
},
},
methods: {
changeExampleEndVal(){
this.endVal1=this.endVal1+1000
},
incrementalUpdate(){
this.startVal1=this.endVal1
this.endVal1=this.endVal1+1000
},
callback() {
console.log('callback')
},
start1() {
this.$refs.example1.start();
},
start2() {
this.$refs.example2.start();
},
start3() {
this.$refs.example3.start();
computed: {
_startVal() {
if (this.setStartVal) {
return this.setStartVal
} else {
return 0
}
},
_endVal() {
if (this.setEndVal) {
return this.setEndVal
} else {
return 0
}
},
_duration() {
if (this.setDuration) {
return this.setDuration
} else {
return 100
}
},
_decimals() {
if (this.setDecimals) {
if (this.setDecimals < 0 || this.setDecimals > 20) {
alert('digits argument must be between 0 and 20')
return 0
}
return this.setDecimals
} else {
return 0
}
},
_separator() {
return this.setSeparator
},
_size() {
return this.setSize
},
_suffix() {
return this.setSuffix
},
_prefix() {
return this.setPrefix
}
},
pauseResume() {
this.$refs.example3.pauseResume();
methods: {
changeExampleEndVal() {
this.endVal1 = this.endVal1 + 1000
},
incrementalUpdate() {
this.startVal1 = this.endVal1
this.endVal1 = this.endVal1 + 1000
},
callback() {
console.log('callback')
},
start1() {
this.$refs.example1.start();
},
start2() {
this.$refs.example2.start();
},
start3() {
this.$refs.example3.start();
},
pauseResume() {
this.$refs.example3.pauseResume();
}
}
}
};
var Ctor = Vue.extend(Main)
const Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</script>
</body>

</html>
2 changes: 0 additions & 2 deletions dist/vue-count-to.min.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/vue-count-to.min.js.map
View file

This file was deleted.

6 changes: 2 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "vue-count-to",
"name": "vue-count2",
"description": "It's a vue component that will count to a target number at a specified duration",
"version": "1.0.13",
"author": "Pan <panfree23@gmail.com>",
"main": "dist/vue-count-to.min.js",
"main": "dist/vue-count2.min.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --content-base='./demo/'",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
@@ -25,9 +25,7 @@
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0",
"babel-eslint": "7.1.1",
"eslint": "3.14.1",
"eslint-friendly-formatter": "2.0.7",
2 changes: 1 addition & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import CountTo from './vue-countTo.vue';
export default CountTo;
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('count-to', CountTo);
window.Vue.component('count2', CountTo);
}
16 changes: 13 additions & 3 deletions src/vue-countTo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<span>
{{displayValue}}
{{ displayValue }}
</span>
</template>
<script>
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
import { cancelAnimationFrame, requestAnimationFrame } from './requestAnimationFrame.js'
export default {
props: {
startVal: {
@@ -45,6 +46,11 @@ export default {
required: false,
default: ','
},
size: {
type: Number,
required: false,
default: 3
},
prefix: {
type: String,
required: false,
@@ -175,8 +181,12 @@ export default {
const x = num.split('.');
let x1 = x[0];
const x2 = x.length > 1 ? this.decimal + x[1] : '';
const rgx = /(\d+)(\d{3})/;
console.log(`(\\d+)(\\d{${this.size}})`);
const rgx = new RegExp(`(\\d+)(\\d{${this.size}})`);
if (this.separator && !this.isNumber(this.separator)) {
console.log(rgx)
console.log('this.separator && !this.isNumber(this.separator)')
console.log('rgx.test(x1) >>> ', rgx.test(x1))
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
}
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ module.exports = {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-count-to.min.js',
filename: 'vue-count2.min.js',
library: 'CountTo',
libraryTarget: 'umd',
umdNamedDefine: true