# vue-countdown-simple

> VUE 倒计时

Latest version **0.1.3** (published 2021-12-30) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-12-30 |
| First published | 2021-12-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 245.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | lionelxue |
| Maintainers | lionelxue |
| Keywords | component, vue, count-down, time-down |

## Links

- npm: https://www.npmjs.com/package/vue-countdown-simple
- npm.io page: https://npm.io/package/vue-countdown-simple

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [print-js](https://npm.io/package/print-js.md) ^1.6.0

## Recent versions

- 0.1.3 (latest) — 2021-12-30
- 0.1.2 — 2021-12-30
- 0.1.1 — 2021-12-30
- 0.1.0 — 2021-12-30

## README

# Vue 倒计时插件

## 安装

``` 
  npm i vue-countdown-simple --save

```

## main.js 引入

```js
import Vue from 'vue'
import CountDown from "vue-countdown-simple";
Vue.use(CountDown)
```
## 组件中引入

```vue
<script>
import { CountDown } from "vue-countdown-simple";
export default {
   components: { CountDown }
}
</script>
```
## 基本使用
```html
<CountDown :time="30000" format="HH:MM:SS" />
```
## 自定义样式及更多用法
#### 方式1：通过绑定change回调的值，进行自定义格式
#### 方式2：通过作用域插槽scope
```vue
<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:剩余的时间格式化后 } |

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