- 安装依赖
npm install cricle-timer
- 注册到main.js
import Vue from 'vue';
import CricleTimer from 'cricle-timer';
Vue.use(CricleTimer);
thresholds: 倒计时填充颜色,阶段阈值,以及颜色变化, color:颜色 threshold:阈值比例
start-time:倒计时开始秒数 on-finished: fun 倒计时结束触发的事件
<template>
<div id="app">
<CricleTimer
:start-time="10"
:step="-1"
:on-finished="finished"
:thresholds="[
{ color: '#FF9370', threshold: 0.5 },
{ color: '#FF1100', threshold: 0.25 }
]"
/>
</div>
</template>
methods: {
finished() {
console.log('倒计时结束')
}
}
npm install
npm run serve
npm run build
npm run lint