BIN-UI-DESIGN

Appearance

On this page

数字动画 CountTo ​

数字动画为常用组件，因此收录至组件库便于使用，整体源码参考vue-count-to实现，props参数也一样，由于纯数字显示，因此所有样式都可以自定义

基础用法 ​

0
<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <b-tag type="primary" dot font-size="14px">
        <b-count-to ref="countToRef" :start-val="startVal" :end-val="endVal"></b-count-to>
      </b-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countToRef = ref(null)

function restart() {
  countToRef.value?.restart()
}
</script>
<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <b-tag type="primary" dot font-size="14px">
        <b-count-to ref="countToRef" :start-val="startVal" :end-val="endVal"></b-count-to>
      </b-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countToRef = ref(null)

function restart() {
  countToRef.value?.restart()
}
</script>

自定义参数 ​

可以设置不同参数来定义时长、前缀、后缀、连接符等来定义显示

0
0.00
0
$0美金
<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo1"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo2"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          :decimals="2"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo3"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          separator=""
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo4"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          prefix="$"
          suffix="美金"
        ></b-count-to>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countTo1 = ref(null)
const countTo2 = ref(null)
const countTo3 = ref(null)
const countTo4 = ref(null)

function restart() {
  countTo1.value?.restart()
  countTo2.value?.restart()
  countTo3.value?.restart()
  countTo4.value?.restart()
}
</script>
<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo1"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo2"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          :decimals="2"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo3"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          separator=""
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo4"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          prefix="$"
          suffix="美金"
        ></b-count-to>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countTo1 = ref(null)
const countTo2 = ref(null)
const countTo3 = ref(null)
const countTo4 = ref(null)

function restart() {
  countTo1.value?.restart()
  countTo2.value?.restart()
  countTo3.value?.restart()
  countTo4.value?.restart()
}
</script>

Props ​

参数说明类型可选值默认值
startVal开始值Number—-
endVal结束值Number—2000
duration动画持续时间Number—2000
autoplay是否自动播放Boolean—true
decimals小数点精度Number—0
decimal小数点显示String—.
separator数字分割String—，
prefix前缀，用于显示之前的字符String——
suffix后缀，用于显示之后的字符String——

Events ​

事件名说明返回值
mounted开始渲染无
callback调用结束无

Functions ​

事件名说明参数
count获取当前值timestamp，时间
start开始无
pauseResume暂停和启动无
reset重置无
restart重启无

MIT Licensed | Copyright © 2023-present bin-ui-design