# vue-countdown-plus

> A simple countdown component for Vue2.x.

Latest version **1.1.4** (published 2021-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-countdown-plus
pnpm add vue-countdown-plus
yarn add vue-countdown-plus
bun add vue-countdown-plus
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2021-12-31 |
| First published | 2021-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 476.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wuanrin |
| Maintainers | wuanrin |
| Keywords | vue, countdown, timer |

## Links

- npm: https://www.npmjs.com/package/vue-countdown-plus
- Repository: https://github.com/wuanrin/vue-countdown-plus
- Homepage: https://github.com/wuanrin/vue-countdown-plus#readme
- Issues: https://github.com/wuanrin/vue-countdown-plus/issues
- npm.io page: https://npm.io/package/vue-countdown-plus

## Recent versions

- 1.1.4 (latest) — 2021-12-31
- 1.1.3 — 2021-08-31
- 1.1.2 — 2021-08-30
- 1.1.1 — 2021-08-30
- 1.1.0 — 2021-08-29
- 1.0.2 — 2021-08-25
- 1.0.1 — 2021-08-25
- 1.0.0 — 2021-08-25

## README

# vue-countdown-plus

A simple countdown component for Vue2.x.

### [Live Demo](https://wuanrin.github.io/vue-countdown-plus/)

## Installation

```
npm install vue-countdown-plus --save
```

## Usage

### Basic

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

### Custom Format

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

### Custom Style

```html
<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

```html
<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>
```

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

### Second Count Down

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

### Events

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

```js
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](https://github.com/wuanrin/vue-countdown-plus/blob/master/LICENSE).

---
_Source: https://npm.io/package/vue-countdown-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._