vue-countdown-simple

Vue 倒计时插件

安装

  npm i vue-countdown-simple --save

main.js 引入

import Vue from 'vue'
import CountDown from "vue-countdown-simple";
Vue.use(CountDown)

组件中引入

<script>
import { CountDown } from "vue-countdown-simple";
export default {
   components: { CountDown }
}
</script>

基本使用

<CountDown :time="30000" format="HH:MM:SS" />

自定义样式及更多用法

方式1：通过绑定change回调的值，进行自定义格式

方式2：通过作用域插槽scope

<template>
  <div>
   <CountDown
      :time="30 * 60 * 60 * 1000"
      :millisecond="true"
      :autoStart="false"
      format="HH:mm:ss:ms"
      ref="countDown"
      @changeRun="onChangeRun"
    >
     <!-- 作用域插槽sccpe -->
      <template v-slot="scope">
        <span>天： {{ scope.timeData.days }}</span>
        <span>小时： {{ scope.timeData.hours }}</span>
        <span>分钟： {{ scope.timeData.minutes }}</span>
        <span>秒： {{ scope.timeData.seconds }}</span>
        <span>毫秒： {{ scope.timeData.milliseconds }}</span>
      </template>
    </CountDown>
    <button @click="reset">重置</button>
    <button @click="start" v-if="!isRuning">开始</button>
    <button @click="pause" v-else>暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRuning: false,
    };
  },
  methods: {
    //开始
    start() {
      this.$refs.countDown.start();
    },
    // 暂停
    pause() {
      this.$refs.countDown.pause();
    },
    // 重置
    reset() {
      this.$refs.countDown.reset();
    },
    //计时器的运行状态
    onChangeRun(e) {
      this.isRuning = e;
    },
  },
};
</script>

<style>
</style>

Props参数

属性	说明	类型	默认值
time	倒计时时长，单位ms	String | Number	0
format	时间格式，DD-日，HH-时，mm-分，ss-秒，ms-毫秒,无需大小写	String	HHss
autoStart	是否自动开始倒计时	Boolean	true
millisecond	是否展示毫秒倒计时	Boolean	false

Events

事件名	说明	回调参数
changeRun	倒计时是否正在运行中。autoStart=false，并且手动开启倒计时时才会触发	true:正在运行.false: 停止运行中
change	过程中，倒计时变化时触发	剩余的时间
finish	倒计时结束

Methods

名称	说明
start	开始倒计时
pause	暂停倒计时
reset	重置倒计时

Scoped Slot

name	说明
——	自定义列的内容，参数为 { formattedTime:剩余的时间格式化之前，timeData:剩余的时间格式化后 }