在 Vue 项目中，经常需要借助一些轮子来实现一些很基础的功能，比如计时器。vue-cool-timer 是一个易用、轻量化的计时器组件，帮助开发者在 Vue 项目中快速实现定时器功能。
安装
vue-cool-timer 可以通过 npm 安装：
npm install vue-cool-timer
引入
在 main.js 中引入：
import Vue from 'vue' import VueCoolTimer from 'vue-cool-timer' Vue.use(VueCoolTimer)
如此一来，vue-cool-timer 就被引入到了全局环境中，可以在项目中任何地方使用。
用法
在组件中使用 vue-cool-timer，需要在 template 中引入 timer 标签并添加属性。具体使用方法如下：
-- -------------------- ---- -------
----------
-----
------
---------
-------------
-------------------
------------------------
---------
------
-----------
--------
------ ------- -
-------- -
------------ -- -
----------------- ----------
-
-
-
---------此时，在页面上就可以看到一个计时器，初始值为 10 秒，前缀为“倒计时：”，后缀为“秒后，将会发生什么？”。当计时器结束时，会触发 @complete 回调函数。
timer 属性
| 属性 | 值的类型 | 描述 | 默认值 |
|---|---|---|---|
| time | Number | 计时器的初始值 | 60 |
| interval | Number | 计时器更新的时间间隔（毫秒），即显示的时间更新的时间间隔 | 1000 |
| prefix | String | 计时器数字前的文本 | ' ' |
| suffix | String | 计时器数字后的文本 | '秒后' |
| format | String | 时间格式。支持的格式详见 dayx.js 格式化时间 | 'mm:ss' |
timer 事件
| 事件名 | 描述 |
|---|---|
| complete | 计时器结束时触发的事件 |
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----------
-----
---- --- ---
------
---------
-------------
-------------------
------------------------
---------
---- --- ---
------
--------
--------------
----------------
----------
-----------------
---------
------
-----------
--------
------ ------- -
-------- -
-------------- -
----------------- -----------
--
--
--
---------总结
通过使用 vue-cool-timer，我们可以快速轻松地实现计时器的功能，帮助开发者专注于其他更加复杂的问题上。同时，我们也可以清楚地看到，Vue 框架对于插件化的支持非常友好，可以轻松地通过 Vue.use() 在项目中引入插件，使用起来非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fc1