Xiaohe-vue-count-to NPM

小何同学 / github@xiaohe0601 / gitee@xiaohe0601

🎉 特性

🍜 支持非线性动画
🍟 支持中途打断动画
🐼 支持Vue 2/3
🧀 支持TypeScript
🍳 支持免费商用
🥗 更多特性等你发掘...

🎮 示例

还可以试一试在线DEMO

🚁 安装

PNPM

pnpm add xiaohe-vue-count-to

YARN

yarn add xiaohe-vue-count-to

NPM

npm install xiaohe-vue-count-to

另外

如果 Vue 版本小于 2.7，还需要安装 @vue/composition-api

pnpm add @vue/composition-api

🛹 使用

简单使用

<template>
  <count-to :value="pandora">
    <template #default="{ value }">
      <span>{{ value }}</span>
    </template>
  </count-to>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { CountTo } from "xiaohe-vue-count-to";

const pandora = ref<number>(0);

onMounted(() => {
  setTimeout(() => {
    pandora.value = 20000;
  }, 100);
});
</script>

控制动画

仅 Vue 3 可直接通过 ref 获取到 xiaohe-transition 实例用于控制动画

<template>
  <count-to ref="counter" :value="pandora">
    <template #default="{ value }">
      <span>{{ value }}</span>
    </template>
  </count-to>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { CountToInst } from "xiaohe-vue-count-to";
import { CountTo } from "xiaohe-vue-count-to";

const counter = ref<CountToInst | null>(null);

const pandora = ref<number>(0);

/**
 * 暂停
 */
function pause(): void {
  counter.value?.transition.pause();
}

/**
 * 继续
 */
function resume(): void {
  counter.value?.transition.resume();
}
</script>

Vue 2/3 均可通过 inited 事件获取到 xiaohe-transition 实例用于控制动画

<template>
  <count-to :value="pandora" @inited="onCounterInited">
    <template #default="{ value }">
      <span>{{ value }}</span>
    </template>
  </count-to>
</template>

<script>
import { CountTo } from "xiaohe-vue-count-to";

export default {
  components: { CountTo },
  data() {
    return {
      pandora: 0
    };
  },
  created() {
    this.transition = null;
  },
  methods: {
    onCounterInited(transition) {
      this.transition = transition;
    },
    /**
     * 暂停
     */
    pause() {
      this.transition?.pause();
    },
    /**
     * 继续
     */
    resume() {
      this.transition?.resume();
    }
  }
};
</script>

属性（Props）

参数	说明	类型	可选值	默认值
value	数值	`NumberLike`	-	0
decimals	小数位数	`NumberLike`	-	0
duration	动画时长（单位: ms）	`NumberLike`	-	2000
preset	预设曲线	`BezierCurvePresetLike`	linear/ease/ease-in/ease-out/ease-in-out	linear
bezier	自定义曲线（优先级高于preset）	`BezierCurve`	-	-
delay	延迟开始时间（单位: ms）	`NumberLike`	-	0
fps	帧率	`NumberLike`	-	-1
decimal `0.3.0`	小数点	`string`	-	.
use-group-value `0.3.0`	是否启用数值分组（示例：10000000.00 -> 10,000,000.00）	`boolean`	-	false
use-indian-style-group `0.3.0`	是否使用印度风格数值分组（示例：10000000.00 -> 1,00,00,000.00）	`boolean`	-	false
separator `0.3.0`	分隔符	`string`	-	,
numerals `0.3.0`	自定义数字	`string[]`	-	-

事件（Events）

事件	说明	回调参数
inited	`transition` 初始化完成	(instance: `Transition`)
change	数值变化	(value: `string`, instance: `Transition`)
started	动画开始	(instance: `Transition`)
paused	动画暂停	(instance: `Transition`)
resumed	动画继续	(instance: `Transition`)
stopped	动画停止	(instance: `Transition`)
completed	动画完成	(instance: `Transition`)