@ludis/vue-countdown

vue-countdown

Countdown component for Vuejs 2.x.

Website: https://flute.github.io/vue-countdown

目录

.
├── dist
│   ├── countdown.common.js     (CommonJS, default)
│   ├── countdown.umd.js        (UMD)
│   ├── countdown.umd.min.js    (UMD, compressed)
└── src
    └── index.js // 源码

安装

npm install @flute/vue-countdown vue

浏览器:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>
<script>Vue.component(VueCountdown.name, VueCountdown);</script>

使用

import Vue from 'vue';
import VueCountdown from '@flute/vue-countdown';

Vue.component(VueCountdown.name, VueCountdown);

<VueCountdown
  notOpenTip="距离开始还剩："
  openingTip="距离结束还剩："
  closedTip="已结束"
  :duration="1*60"
  @start="startHandler"
  @end="endHandler"
  startTime="2018-11-01 20:35:00">
  <template slot="tip" scope="props">
    {{props.tip}}
  </template>
  <template slot="countdown" scope="props">
    {{props.days}}天{{props.hours}}小时{{props.minutes}}分钟{{props.seconds}}秒
  </template>
</VueCountdown>

<!--
开始前：
<div>
  距离开始还剩: 01天01小时11分钟11秒
</div>

进行中：
<div>
  距离结束还剩: 01天01小时11分钟11秒
</div>

已结束：
<div>
  已结束: 00天00小时00分钟00秒
</div>
-->

更多使用案例参考： https://flute.github.io/vue-countdown

Attributes

Events