Titans-UI

DigitalTransition 数字累加

基础用法

设置 end 属性或通过默认插槽传入值

00
通过 step 属性控制每次变化的步长。
<template>
  <ti-digital-transition :step="5" :duration="0" :end="1000"/>
  <ti-digital-transition :step="5" :duration="0">360</ti-digital-transition>
</template>
<script setup>
import { ref } from 'vue'
const value = ref(0)
</script>

过渡的持续时长

通过 step 属性控制可能会有总过渡时间过长的问题。
通过设置 duration 属性控制过渡的时长，当设置了 duration 属性时，会自动计算步长，设置的 step 属性会失效。

0
<template>
  <div>
    <ti-digital-transition
      :duration="2000"
      :end="digital"
      @ended="ended"
      @updated="updated"
      style="color: red;"
    />
  </div>

  <ti-button @click="changeValue(100)">增加 100</ti-button>
  <ti-button @click="changeValue(-100)">减小 100</ti-button>
</template>
<script setup lang="ts">
import {ref} from 'vue'

const digital = ref(1000)
const changeValue = (val: number) => {
  digital.value += val
}
const ended = (val: number) => {
  console.log('ended: ', val);
}
const updated = (val: number) => {
  console.log('updated: ', val);
}
</script>

DigitalTransition 属性

参数说明类型可选值默认值
start过渡的起始值number—0
end过渡的最终值，也可通过默认插槽传入该最终值number——
step过渡的步长number—1
interval过渡过程中每步的间隔时间，单位：msnumber—16
duration过渡的持续时间number——
accuracy过渡过程中每步值的精度（保留的小数位数）number—0

DigitalTransition 插槽

插槽名说明
—过渡的最终值的另一种传入方式，可替代 end 属性

DigitalTransition 事件

事件名说明回调参数
ended在过渡结束时触发，参数为过渡的最终值(val: number)
updated在过渡更新过程的结束时触发，参数为过渡的最终值(val: number)