vue-countTo icon indicating copy to clipboard operation
vue-countTo copied to clipboard

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

Open saojun1024 opened this issue 5 years ago • 2 comments

saojun1024 avatar Dec 27 '18 13:12 saojun1024

赞同, 希望改进

Valar103769 avatar Jan 17 '20 03:01 Valar103769

对,希望新增连续变化的设定

cangyu1993 avatar Aug 13 '21 07:08 cangyu1993

可以自己封装一个,直接绑定value即可,其他配置项均继承,参考代码:

<template>
  <vue-count-to
    v-bind="$attrs"
    v-on="$listeners"
    :start-val="startVal"
    :end-val="endVal"
  />
</template>
<script>
import VueCountTo from 'vue-count-to'
export default {
  name: 'CountTo',
  inheritAttrs: false,
  components: {
    VueCountTo,
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      startVal: 0,
      endVal: 0,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newVal, oldVal) {
        this.startVal = oldVal
        this.endVal = newVal
      },
    },
  },
}
</script>
<style scoped>

</style>

使用示例

      <count-to
        :value="total"
        :decimals="0"
        :duration="3000"
      />

mirari avatar Jan 25 '22 06:01 mirari