panjiachen/vue-countto

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

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:

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

vue-countto's Issues

关于源码 props 中 easingFn问题

easingFn: { type: Function, default(t, b, c, d) { return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; } }

子组件里 easingFn 只在methods方法里内部调用，为什么不直接在methods写

关于prop 的decimals重定义

vue.runtime.esm.js?2b0e:619 [Vue warn]: Method "decimals" has already been defined as a prop.

found in

---> <CountTo> at node_modules/vue-count-to/src/vue-countTo.vue
       <Box> at src/components/box.vue
         <Home> at src/views/Home.vue
           <App> at src/App.vue
             <Root>

项目中mixin.js 有这个method ，使用的decimal作为命名，会产生这个问题

separator参数无效

按照官网DEMO
separator 加了冒号会报错,不加会无效

<count-to :start-val="0" :end-val="25" :duration="2600" :separator="" class="box-num"/>

自动播放的问题

endVal变化时，需要手动调用start来启动动画。
建议在autoplay时, watch endVal自动开启动画

请教下一个easingFn的问题

easingFn: {
  type: Function,
  default(t, b, c, d) {
    // 类似这一块有啥计算方式，这个计算公司如何可得？
    return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  }
}

能不能设置默认值，有默认值效果会很不好

我数据是0到0，有默认值会从高的降到0 效果很不好

Numbers jump when text align center or right

Numbers jump when text align center or right

Could not find a declaration file for module 'vue-count-to'.

[{
	"resource": "components/PanelGroup.vue",
	"owner": "_generated_diagnostic_collection_name_#2",
	"code": "7016",
	"severity": 8,
	"message": "Could not find a declaration file for module 'vue-count-to'. 'admin/node_modules/.pnpm/[email protected]/node_modules/vue-count-to/dist/vue-count-to.min.js' implicitly has an 'any' type.\n  Try `npm i --save-dev @types/vue-count-to` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-count-to';`",
	"source": "Vetur",
	"startLineNumber": 59,
	"startColumn": 21,
	"endLineNumber": 59,
	"endColumn": 35
}]

显示数据和我输入数据不一样

比如 我输入个 124.83394152848399706 然后小数点后保留 decimals=17 却出现了 124.83394152848399017

实际情况在异步实时获取数据时，例如0，2，100，300，500这样不断变化时，每一次都需要将endVal赋予给下一次开始的startVal,显得多余。可以一个value即可的

a little suggestion

use slot,wo we can customized the displayValue
like this:

so we can use like this:
<count-to :end-val="3000" v-slot:default="{displayValue}"{{displayValue||pipeline}}<count-to

自己更新了一个基于vue3的版本

自己更新了一个基于vue3的版本，大家可以去试用下，使用方式和这个一摸一样，只是在原有的基础上进行改进（原作者的代码是相当优秀的），点击查看

使用vue-cli报错：t.toFixed is not a function， 但是数据正常显示

vue-count-to.min.js?c264:1 Uncaught TypeError: t.toFixed is not a function
at VueComponent.formatNumber (vue-count-to.min.js?c264:1)
at VueComponent.count (vue-count-to.min.js?c264:1)

输入250000或者20000会报错tofixed未定义，

报错位于formatNumber方法，t参数，执行t.toFixed报错，需要区别对待，if判断t是数字类型就执行toFixed,如果不是就写else.

代码如上。

in Vue2 I didn't using any {} to import, it still work

is that correct? it doesn't like your demo? will you update README file?

start()方法调用失败

报错提示：
Uncaught TypeError: this.$refs.refresh1.start is not a function
引入
import countTo from 'vue-count-to'
vue:
<countTo ref="refresh1" :startVal='0' :endVal='3000' :duration='3000'></countTo>
script:
this.$refs.refresh1.start()
其实是想做一个点击不管数据有无变化都会重新开始动画的效果，不知道问题出在哪里。

场景：递增，ease: fasle 的时候，数值不变化

看了代码发现是这里写错了this.printVal = this.localStartVal + (this.localStartVal - this.startVal) * (progress / this.localDuration)
改为：this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration) 运行正常

请问匀速变化的easingFn要怎么写？

不支持循环播放特性

未来是否支持增加间隔性循环播放特性呢？
比如，10秒钟重新播放一次

自己封了一个 vue 3 版本，欢迎使用！

自己基于 countup.js 封了一个 vue3 版本，欢迎使用！ vue-countup-v3
功能：

• TypeScript 支持；
• 自动计数、无限/有限次循环轮播、自定义过渡动画函数 ....
• 丰富的选项配置；

不能显示小数点哦。。。

不能显示小数点哦。。。
而且会多出来一个无用的span元素。。。
可以改造一下吗

Please Support Vue3 and Typescript

thank you！

如果是0.01-0.1要count-to是要如何设置

count up when visited

Hi.
how to start count up when component visited in viewport?

endVal 默认值2017 是认真的嘛~

小数会被自动四舍五入

小数会被自动四舍五入，比如填写了1.4得到的结果就是1，能不能加个控制的开关呢？

Server Side Rendering is broken

As you rely on "window" to be present, this little sweet component explodes in frameworks like NuxtJS. Could you try to avoid relying on window? For what reason do you use it anyway?

[Feature Request]changing from last state instead of from `start-val`

<count-to :start-val="0"  :end-val="val" />
<script>
methods:{
    modify() {
      this.val += 100
    }
}
</script>

at first time execute modify() it would from 0 to 100,
how could at second/more times execute modify(), let it from 100 to 200 , instead of 0 to 100 again

运行vue-count-to组件的时候报错

app.js:784 TypeError: window.Vue.component is not a function
at Object.defineProperty.value (vue-count-to.min.js?bc65:1)

页面刷新有个地图加载，这个东西好卡

页面刷新有个地图加载中，这个东西好卡，先动了一下，然后卡住好久，然后又一顿一顿的动

make update possible

would be very nice to be able to update the values without the need to manually change both the start end endval.

In my setup I have a vote mechanism where I display several options with percentage values. Anytime a user votes, the values update automatically. The issue with this component is that I can't update the values from its current values (like from 50 to 80 percent) without braking it. Any Idea how to manage that usecase?

By the way, thanks for that cool component. Keep up the good workd ;)

:decimals="2"时 数据会闪个几毫秒。接着变空白

当数据是是异步获取的时间会报undefine

当:endVal 所绑定的数据（asyncData.endVal）还没有从后台获取到的时候,组件能正常工作，不过控制台会报undefined，请问这个该如何解决？

麻烦可以添加LICENSE文件吗

如题，可以添加合适的license文件吗？想要在商业项目中使用此组件，但没看到作者是否允许此行为。

没有获取当前值的属性或方法吗？

从起始数值，跳到结束数值期间，如何获取到当下正在跳转时的数值属性？

当数字为5 - 9之间时，数字会自动加一。

小数精度丢失

code

c40649f0fa5069c69439c970d5714d12bf827566

为什么字体颜色变为渐变色之后动画就失效了

为什么字体颜色变为渐变色之后动画就失效了

About `autoplay`

<count-to :startVal='0' :endVal='reportCount'></count-to>

created () {
   axios.get('/api/admin/report/count')
     .then(response => {
       this.reportCount = response.data.reportCount
     })
}

以上组件会在加载时自动开始向 2017 (默认值) 计数, 即使数据请求尚未返回.

<count-to :startVal='0' :endVal='reportCount' :autoplay='false'></count-to>

这样需要手动触发计数很不方便.

<count-to :startVal='0' :endVal='reportCount'></count-to>

data () {
  reportCount: 0
}

这样其实会在加载时开始计数, 只不过一直是 0, 如果数据返回有延迟, 计数值会出现跳跃.

Workaround:

<count-to :startVal='0' :endVal='reportCount' :autoplay="true" v-if="typeof reportCount !== 'undefined'"></count-to>

这样可以使组件在请求返回后才开始加载.

---

我向 CountTo 组件添加了一个参数 autoplayWhenChange

props: {
  autoplayWhenChange: {
    type: Boolean,
    required: false,
    default: true
  }
}

并修改监视器

watch: {
  startVal () {
    if (this.autoplay || this.autoplayWhenChange) {
      this.start()
    }
  },
  endVal () {
    if (this.autoplay || this.autoplayWhenChange) {
      this.start()
    }
  }
}

<count-to :startVal='0' :endVal='reportCount' :autoplay="false" :autoplayWhenChange="true"></count-to>

这样可以实现在请求返回后开始计数, 同时避免数字不连续的跳跃.

这样不知道是不是一个合理的 feature.

建议支持大数增加单位功能 23456789 -> 2345.68万

23456789 -> 2345.68万， 1234456789 -> 12.34亿

解决数字匀速递增的问题

<countTo class="count_to" :startVal='startVal-50' :endVal='endVal' :duration='100000' :easingFn="easingFn"></countTo>

methods: {

easingFn(t, b, c, d){

let y = c*t/d+b; //此方法为匀速

return y;

//return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; //原方案为先快后慢

}

}

生成的span 里前后空格

生成的span 里前后空格

请问支持SSR吗？

angels