vue-countdown-plus

A simple countdown component for Vue2.x.

Live Demo

Installation

npm install vue-countdown-plus --save

Usage

Basic

<countdown-plus :time="30 * 60 * 60 * 1000" />

Custom Format

<countdown-plus
  :time="30 * 60 * 60 * 1000"
  format="DD ~Day, HH:mm:ss"
/>

Custom Style

<countdown-plus
  :time="30 * 60 * 60 * 1000"
  format="HH:mm:ss"
>
  <template v-slot="{ resolved }">
    <span class="countdown-item">{{ resolved.HH }}</span> :
    <span class="countdown-item">{{ resolved.mm }}</span> :
    <span class="countdown-item">{{ resolved.ss }}</span>
  </template>
</countdown-plus>

Masual Control

<div>
  <countdown-plus
    ref="countdown"
    :time="30 * 60 * 60 * 1000"
    :auto-start="false"
  />
  <div class="control-buttons">
    <button @click="start">Start</button>
    <button @click="pause">Pause</button>
    <button @click="reset">Reset</button>
  </div>
</div>

export default {
  methods: {
    start() {
      this.$refs.countdown.start()
    },
    pause() {
      this.$refs.countdown.stop()
    },
    reset() {
      this.$refs.countdown.reset()
    }
  }
}

Second Count Down

<countdown-plus :time="60 * 1000" format="ss" />

Events

<countdown-plus
  :time="5 * 1000"
  format="ss"
  @change="handleChange"
  @finish="handleFinish"
/>

export default {
  methods: {
    handleChange ({ currentTime, resolved, formatted }) {
      console.log(currentTime, resolved, formatted)
    },
    handleFinish () {
      console.log('finished')
    }
  }
}

API

Props

| Prop | Description | Type | Default | | ---------- | -------------------------------- | ------- | -------- | | time | Total time | number | 0 | | format | Time format | string | HH:mm:ss | | auto-start | Whether to auto start count down | boolean | true |

Available formats

| Format | Description | | ------ | -------------------- | | D | Day | | DD | Day, leading zero | | H | Hour | | HH | Hour, leading zero | | m | Minute | | mm | Minute, leading zero | | s | Second | | ss | Second, leading zero | | S | Millisecond, 1-digit | | SS | Millisecond, 2-digit |

If you don't want to convert a unit charactor you can prefixing the character ~ before the unit character.

For example, format prop DD Day HH:mm:ss will be converted to 01 1ay HH:mm:ss, the word Day is incorrectly converted to 1ay. Using DD ~Day HH:mm:ss can solve this problem.

Events

| Event | Description | Arguments | | ------ | -------------------------------- | --------- | | change | Emitted when count down changed | { currentTime, resolved, formatted } | | finish | Emitted when count down finished | - |

Slots

| Name | Description | SlotProps | | ------- | -------------- | ------------------------------ | | default | Custom Content | countdown, resolved, formatted |

SlotProps

| Name | Type | Description | | --------- | ------ | ------------------------------------ | | countdown | number | Remaining countdown | | resolved | object | Remaining countdown after resolving | | formatted | string | Remaining countdown after formatting |

resolved is an object contains resolved countdown according to the format prop.

For example, resolved may be { mm: 10, ss: 10, SS: 10 } when format is mm:ss:SS. So you can custom display according resolved.

If an time unit is not in prop format, it will not be in resolved.

Methods

| Name | Description | Attribute | Return Value | | ----- | ---------------- | --------- | ------------ | | start | Start count down | - | - | | stop | Stop count down | - | - | | reset | Reset count down | - | - |

Attributes

| Name | Type | Description | | ----------- | ------- | ------------------------------------ | | currentTime | number | Remaining countdown | | resolved | object | Remaining countdown after resolving | | formatted | string | Remaining countdown after formatting | | inCountdown | boolean | Whether in countdown |

License

vue-countdown-plus is licensed under The MIT License.