vue-countdown-plus v1.1.4

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

Available formats

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

Slots

SlotProps

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

Attributes

License

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