持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

一、前言

今天简单看了一下组件库，一眼就瞄到 倒计时 Countdown和 数值动画 Number Animation，市面上确实有许多类似的代码可以实现这两个功能，但哪有直接白嫖来的爽呢。

下面我们边实现个小demo，边做边给大家伙说说这两个组件应该如何使用，demo比较简单，主要是各个属性的应用，让大家更直观地了解一下这两个组件。

数值动画，倒计时.gif

二、过程

1、引入

我们在main.ts全局引入本次需要的组件NNumberAnimation和NCountdown，就不单独在页面里引入了。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
  create,
  NButton,
  NNumberAnimation,
  NCountdown
} from 'naive-ui'

const naive = create({
  components: [NButton, NNumberAnimation, NCountdown]
})

createApp(App).use(naive).mount('#app')

2、n-number-animation

数值动画需要ref绑定一下，才方便调用其中的play方法，作用是播放动画，也可以控制active的布尔值改变来触发动画。下面是它的几个参数值，基本一眼就清楚作用。

from       number类型，默认值0，是数值动画的起始值
to         number类型，默认值undefined，是数值动画的目标值
precision  number类型，默认值0，是精度，打算保留几位小数
duration   number类型，默认值3000，是动画持续时间
active     boolean类型，默认值true，是否开始动画
on-finish  （）=> void类型, 默认值undefined， 是动画结束的回调

这是本项目的写法，我们设置active为false，默认不开启动画，然后我们通过ref调用play函数来开启动画，并且挂载一个动画结束时的会调用函数countDownStart。

<n-number-animation 
  class="number" 
  ref="numberAnimationInstRef"
  :from="0"
  :to="countTime"
  :active="false"
  :precision="2"
  :show-separator="true"
  :on-finish="countDownStart"
  :duration="10000" />

下面我们按官网导入NumberAnimationInst，初始化上面的ref变量numberAnimationInstRef，并且声明一个handleClick函数，用来触发play函数。

import { NumberAnimationInst } from 'naive-ui'
const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
let countTime = 3153600000
function handleClick () {
  numberAnimationInstRef.value?.play()
}

挂载在下面这个button上，通过点击button，我们触发该函数，数值动画开始计时。

<n-button type="info" @click="handleClick()">
    点击测试
  </n-button>

3、n-countdown

跟数值动画不同，数值动画一旦开启，就不能暂停，倒计时ncountdown则支持，随时暂停。

ncountdown的属性基本跟n-number-animation类似，常用的是这四个属性。

precision  number类型，默认值0，是精度，打算保留几位小数
duration   number类型，默认值3000，是动画持续时间
active     boolean类型，默认值true，是否开始倒计时
on-finish  （）=> void类型, 默认值undefined， 是倒计时结束的回调

这是本项目的写法，show是控制n-countdown组件是否显示，可去掉，showDown是开启倒计时的关键，当showDown为出的时候，倒计时就会开始。我是在数值动画的结束回调里，调用了countDownStart函数，修改showDown为true了。

let show = ref(0)
let showDown = ref(false)
function countDownStart () {
  show.value++
  showDown.value = true
  console.log('开始倒计时', show, showDown.value)
}

标签写法

   <div v-show="show" class="label"> 生命倒计时: 
       <n-countdown :duration="countTime" :active="showDown" :precision="2" />秒 
   </div>

4、整体逻辑

我们点击按钮触发handleClick函数，然后开启数值动画，在数值动画结束时的回调函数countDownStart里，修改倒计时的active值，开启倒计时，就能达到文字开头的那种效果啦。

三、小结

今天这两个组件都可以做大屏的滚动数字，比较便利，加上一些样式就能实现很炫酷的效果，大家伙可以试试看。

ps：我是地霊殿__三無，滴~上班卡。

naive库组件--倒计时+数值动画