timer4vue

Install

npm install timer4vue --save

代码演示

##基本用法

<template>
  <timer
     ref="timerRef"
     :time="6"
     time-type="seconds"
  />
  <button @click="start">start</button>
  <button @click="stop">stop</button>
  <button @click="restart">restart</button>
  <button @click="reset">reset</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import timer from 'timer4vue'

const timerRef = ref()

//开始
const start = () => timerRef.value.start()

//停止
const stop = () => {
  const res = timerRef.value.stop()
  console.log("剩余秒数", res.seconds);
  console.log("过去秒数", res.pastTime);
  console.log("总秒数", res.totalSeconds);
  //restart和reset也含有这个返回值
}

//重新开始
const restart = () => {
  const res = timerRef.value.restart()
}

//重置
const reset = () => {
  const res = timerRef.value.reset()
}
</script>

使用图标，使用标题(可以使用slot自由替换标题跟图标)

<template>
  <timer
    ref="timerRef"
    :time="6"
    time-type="minutes"
    :icon-rotate="true"
    :icon="true"
  >
    <template #icon>
      
    </template>
    <template #title>
      剩余时间：
    </template>
  </timer>
</template>

事件(时间结束后的回调)

<template>
  <timer @end="end" />
</template>

<script lang="ts" setup>
import timer from 'timer4vue'
const end = () => console.log("end");
</script>

timer属性

所有属性均可选且有默认值

属性名	类型	默认值	说明	可选值
backgroundColor	String	"#1890FF"	背景色(如果设置背景色透明，hover背景色也需要设置透明，字体颜色不要跟背景色重合)
color	String	"#ffffff"	文字颜色
css	String	""	样式(不要在该属性设置背景色,文字大小)	"line-height: 200px;text-indent: 2rem;"等
hoverBackgroundColor	String	"#40a9ff"	鼠标进入背景颜色
icon	Boolean	false	是否显示图标(使用图标插槽必须设置为true)	true,false
iconRotate	Boolean	false	图标是否旋转	true,false
radius	String		圆角	"small","large","12px","50%"等
size	String	"20px"	大小	"16px","2rem"等
shark	Boolean	false	分隔符是否闪烁	true,false
sharkTime	Number	1000	分隔符闪烁间隔时间(单位: 毫秒)
split	String	":"	时间分隔符
time	Number	10	需要设置的时间
timeType	String	minutes	需要设置的时间的单位	seconds,minutes,hours,days,weeks,months,years

timer实例属性

属性名	类型	说明	返回值
restart	Function	重新开始
start	Function	开始	{seconds, pastTime, totalSeconds} = {剩余秒数，过去的秒数，总秒数}
stop	Function	停止	{seconds, pastTime, totalSeconds} = {剩余秒数，过去的秒数，总秒数}
reset	Function	重置	{seconds, pastTime, totalSeconds} = {剩余秒数，过去的秒数，总秒数}