TUI

<template>
  <div class="component-card-demo-wrap number-grow-demo-base">
    <TsNumberGrow :value="1000" :play="true" />
  </div>
</template>

<script setup lang="ts">
import { TsNumberGrow } from 'tui';
</script>

<style scoped>
.number-grow-demo-base {
  flex-direction: column;
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsNumberGrow :start="0" :value="100.25" :duration="2" :step="0.05" :decimals="2" :play="true" />
  </div>
</template>

<script setup lang="ts">
import { TsNumberGrow } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsNumberGrow :value="5000" :lazy="true" :playOnce="true" @start="handleStart" />
  </div>
</template>

<script setup lang="ts">
import { TsNumberGrow } from 'tui';

const handleStart = () => {
  // console.log('开始播放');
};
</script>

<template>
  <div class="component-card-demo-wrap number-grow-demo-inline">
    <TsNumberGrow :value="888" :play="play" :playOnce="false" @end="handleEnd" />
    <TsButton class="number-grow-demo-button" @click="play = true">播放</TsButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsNumberGrow } from 'tui';

const play = ref(false);

const handleEnd = () => {
  play.value = false;
  console.log('结束');
};
</script>

<style scoped>
.number-grow-demo-inline {
  align-items: center;
}

.number-grow-demo-button {
  margin-left: 50px;
}
</style>

<template>
  <div class="component-card-demo-wrap number-grow-demo-inline">
    <TsNumberGrow :start="100" :value="0" :playOnce="false" :play="reversalPlay" @end="reversalPlay = false" />
    <TsButton class="number-grow-demo-button" @click="reversalPlay = true">播放</TsButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsNumberGrow } from 'tui';

const reversalPlay = ref(false);
</script>

<style scoped>
.number-grow-demo-inline {
  align-items: center;
}

.number-grow-demo-button {
  margin-left: 50px;
}
</style>