• Stars
    star
    1,328
  • Rank 34,491 (Top 0.7 %)
  • Language
    JavaScript
  • Created about 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/

vue-countTo

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

vue2 Gemnasium license npm npm minified gzip

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

How to use?

npm install vue-count-to

Example

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

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

demo:

demo

Use CDN Script: demo

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 **

Functions

Function Name Description
mountedCallback when mounted will emit mountedCallback
start start the countTo
pause pause the countTo
reset reset the countTo

More Repositories

1

vue-element-admin

🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Vue
82,787
star
2

vue-admin-template

a vue2.0 minimal admin template
JavaScript
18,508
star
3

electron-vue-admin

vue electron admin template web: http://panjiachen.github.io/vue-admin-template
JavaScript
2,998
star
4

awesome-bookmarks

💖 A curated list of awesome things
JavaScript
1,817
star
5

vue-split-pane

Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html
JavaScript
513
star
6

vue-element-admin-site

📝 The documentation source of vue-element-admin https://panjiachen.github.io/vue-element-admin-site
Shell
344
star
7

Music-Visualization

音乐可视化
JavaScript
64
star
8

PanJiaChen.github.io

Pjc
CSS
63
star
9

custom-element-theme

custom-element-theme
CSS
59
star
10

tinymce-all-in-one

Build all tinymce plugins into one js
JavaScript
39
star
11

countUp-demo

JavaScript
20
star
12

get-markdown-images

💾 get all images from markdown
JavaScript
12
star
13

demo-playground

😎 A simple development playground with live reload capability
JavaScript
10
star
14

PanJiaChen

8
star
15

vue-tree-table

vue-tree-table
Vue
7
star
16

cos-nodejs

腾讯云 cos nodejs sdk 上传
JavaScript
6
star
17

tree-shaking-test

for tree-shaking test demo
JavaScript
3
star
18

tinymce-lang

support Tinymce's lang cdn
JavaScript
3
star
19

tangram

css3 tangram
HTML
3
star
20

chunk-test

just for test demo
Vue
2
star
21

create-react-bolierplate

create-react-bolierplate quickly start
JavaScript
1
star
22

singalpage

初学前端时候做的一个singalpage
JavaScript
1
star
23

chrome-extenstion-ToDoList

chrome-extenstion-ToDoList
JavaScript
1
star
24

node-react

JavaScript
1
star
25

cssnano-test

just for cssnano issue test
JavaScript
1
star
26

color-2048

color-2048
JavaScript
1
star
27

image-tags

JavaScript
1
star
28

react-chatroom

react-chatroom pc demo:http://rebirth.wallstcn.com/chatroom/51 wap demo http://m.wallstcn.com/chatroom/detail/51
JavaScript
1
star
29

chunksSortMode-test

just for issue test
Vue
1
star