快速开始

安装

前置准备

• Vue.js 3.x

npm

$ npm install vue-to-counter --save

pnpm

$ pnpm add vue-to-counter

yarn

$ yarn add vue-to-counter

注意

VueToCounter 目前有两个可选的依赖项，考虑到它们的体积较大，所以默认情况下不会被安装。你可以根据需要手动安装它们。

• decimal.js: Decimal.js 提供了近乎无限制的精度，用于处理大数/高精度浮点数计算。什么时候需要使用它

  

• grapheme-splitter: grapheme-splitter 可以正确地分割包含 emoji 的字符串。什么时候需要使用它

  

注册/引入组件

全局注册

main.js/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import VueToCounter from "vue-to-counter";

createApp(App).use(VueToCounter).mount("#app");

局部引入

<script setup>
import { VueToCounter } from "vue-to-counter";
</script>

<template>
  <VueToCounter />
</template>

用法

你只需要更新数值，VueToCounter 会自动处理剩下的事情。

`VueToCounter` 是这样的，你只要更新数值就可以，可 `VueToCounter` 要考虑的事情就很多了。XD

下方这是一个简单的示例，VueToCounter 会自动响应数字的变化，并且会自动处理数字的增减动画。

---

011000000032103210

---

GettingStartedDemo.vue

<script setup>
import { onMounted, ref } from "vue";

const userCount = ref(1000);
onMounted(() => {
  setInterval(() => (userCount.value += Math.floor(Math.random() * 10)), 1100);
});
</script>

<template>
  <vue-to-counter-number
    class="font-mono font-bold self-center"
    :value="userCount"
  />
</template>

<style scoped></style>

下一步

• 想查看更多 VueToCounter 的示例？请查看 示例。
• 要了解 VueToCounter 的配置参数？请查看 配置和API。
• 要探索 VueToCounter 样式和动画更多的可能性，例如实现这样的效果？你可以从 深入 VueToCounter 开始。