next UI

# CountUp 数字动画

# 概述

将一个数字以动画的形式动态渐变到指定值的组件。

# 代码示例

基础用法
该组件基于 countup.js 封装，可以自由控制数字动画过程。

目标值：1234，持续时间：6秒

控制

<template>
    <div>
        <p class="ivu-m"><strong>目标值：1234，持续时间：6秒</strong></p>
        <CountUp :end="1234" :duration="6" ref="count" v-font="24" />
        <p class="ivu-m"><strong>控制</strong></p>
        <Button @click="handlePause">暂停/继续</Button>
        <Button @click="handleReset">重置</Button>
        <Button @click="handleStart">开始</Button>
        <Button @click="handleUpdate">更新至：</Button>
        <InputNumber v-model="update" :min="1" :max="10000" />
    </div>
</template>
<script>
    export default {
        data () {
            return {
                update: 5000
            }
        },
        methods: {
            handlePause () {
                this.$refs.count.CountUp.pauseResume();
            },
            handleReset () {
                this.$refs.count.CountUp.reset();
            },
            handleStart () {
                this.$refs.count.CountUp.start();
            },
            handleUpdate () {
                this.$refs.count.CountUp.update(this.update);
            },
        }
    }
</script>
Expand Copy
小数
设置属性 decimals 指定小数位数。

目标值：1234，持续时间：6秒，小数位数：2位

控制

<template>
    <div>
        <p class="ivu-m"><strong>目标值：1234，持续时间：6秒，小数位数：2位</strong></p>
        <CountUp :end="1234" :duration="6" :decimals="2" ref="count" v-font="20" />
        <p class="ivu-m"><strong>控制</strong></p>
        <Button @click="handleRestart">重新开始</Button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleRestart () {
                this.$refs.count.CountUp.reset();
                this.$refs.count.CountUp.start();
            }
        }
    }
</script>
Expand Copy
回调
设置属性 callback 可以在结束时继续完成操作。

初始目标值：50，到达后，延迟1秒再到目标值 100

控制

<template>
    <div>
        <p class="ivu-m"><strong>初始目标值：50，到达后，延迟1秒再到目标值 100</strong></p>
        <CountUp :end="end" :duration="3" :callback="handleUpdate" ref="count" v-font="20" />
        <p class="ivu-m"><strong>控制</strong></p>
        <Button @click="handleRestart">重新开始</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                end: 50
            }
        },
        methods: {
            handleUpdate () {
                setTimeout(() => {
                    this.end = 100;
                }, 1000);
            },
            handleRestart () {
                this.end = 50;
                this.$refs.count.CountUp.reset();
                this.$refs.count.CountUp.start(this.handleUpdate);
            }
        }
    }
</script>
Expand Copy
自定义设置项
设置属性 options 可以自定义 countup.js 的其他选项，比如示例是不显示分隔符及 easing 动画。

不显示分隔符及 easing 动画

控制

<template>
    <div>
        <p class="ivu-m"><strong>不显示分隔符及 easing 动画</strong></p>
        <CountUp :end="1234" :duration="6" :options="options" ref="count" v-font="20" />
        <p class="ivu-m"><strong>控制</strong></p>
        <Button @click="handleRestart">重新开始</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                options: {
                    useEasing: false,
                    useGrouping: false
                }
            }
        },
        methods: {
            handleRestart () {
                this.$refs.count.CountUp.reset();
                this.$refs.count.CountUp.start();
            }
        }
    }
</script>
Expand Copy

# API

# CountUp Props

属性 说明 类型 默认值
start 起始值 Number 0
end 结束值，必填 Number -
decimals 小数位数 Number -
duration 持续时间，单位：秒 Number 2
options countup.js 设置项 Object {}
callback 回调函数 Function -

# CountUp Methods

注：该系列方法不能直接通过 this.xxx 调用，而是通过 this.CountUp.xxx 调用，比如：

this.$refs.count.CountUp.pauseResume();

方法名 说明 参数
pauseResume 暂停/继续 无
reset 重置 无
start 开始 callback(可选)
update 更新结束值 newEndVal

← 样式指令 →