ProNumberAnimation 数值动画

这个动画，那么有科技感，又很酷炫，可以用于展示数据变化。

用法

基础使用

你一共处理了 0 条消息

使用 precision 设定精度

我期望的余额： 0 $

使用 show-separator 千分位分割

你一共处理了 0 条消息

一个小目标

0

<template>
  <div class="content">
    <el-card shadow="never">
      <div class="title">基础使用</div>
      <pro-number-animation :from="0" :to="433664">
        <template #default="{ value }">
          你一共处理了
          <span class="number">{{ value }}</span>
          条消息
        </template>
      </pro-number-animation>
    </el-card>

    <el-card shadow="never">
      <div class="title">使用 precision 设定精度</div>

      <pro-number-animation :from="0" :to="99999999" :precision="2">
        <template #default="{ value }">
          我期望的余额：
          <span class="number">
            {{ value }}
            $
          </span>
        </template>
      </pro-number-animation>
    </el-card>

    <el-card shadow="never">
      <div class="title">使用 show-separator 千分位分割</div>

      <pro-number-animation :from="0" :to="433664" show-separator>
        <template #default="{ value }">
          你一共处理了
          <span class="number">{{ value }}</span>
          条消息
        </template>
      </pro-number-animation>
    </el-card>

    <el-card shadow="never">
      <div class="title">一个小目标</div>

      <pro-number-animation
        class="number"
        ref="numberAnimationRef"
        :from="0"
        :to="1000000000"
        :precision="2"
        show-separator
        @done="done"
      />

      <el-button type="primary" @click="play">播放</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ProNumberAnimation } from '@coderhd/pro-element-plus'
import { ElMessage } from 'element-plus'

const numberAnimationRef = ref<InstanceType<typeof ProNumberAnimation>>()
const play = () => {
  numberAnimationRef.value?.play()
}
const done = (val: string) => {
  ElMessage.success(`支付宝到账：${val} 元`)
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .title {
    font-size: 16px;
    color: rgb(118, 124, 130);
    margin-bottom: 10px;
  }
  .number {
    font-size: 24px;
    margin-bottom: 10px;
  }
}
</style>

Attributes

属性名	类型	默认值	说明
from	number	0	初始值
to	number	0	目标值
duration	number	3000	动画时长，单位毫秒
precision	number	0	小数点精度
show-separator	boolean	false	是否显示千位分隔符
bezier-points	number[]	[0.25, 0.1, 0.25, 1.0]	贝塞尔曲线控制点

Methods

方法名	说明	参数
play	播放动画	() => void

Events

事件名	说明	回调参数
done	动画完成	(value: string) => void

Slots

插槽名	说明	参数
default	默认插槽	{ value: string }