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 | HH:mm:ss| | autoStart | 是否自动开始倒计时 | Boolean | true| | millisecond | 是否展示毫秒倒计时 | Boolean | false |

Events

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

Methods

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

Scoped Slot

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