CountDown 倒计时

效果

使用方法

<template>
    <div class="demo-list">
      <lc-title title="倒计时"></lc-title>
      <category title="基本用法"></category>
      <div>
        <lc-cell>
          <lc-countdown slot="title" :endTime="end" @on-end="onend"/>
        </lc-cell>
      </div>

      <category title="显示天"></category>
      <div>
        <lc-cell>
          <lc-countdown slot="title" :endTime="end" showDays/>
        </lc-cell>
      </div>

      <category title="显示为 天时分秒"></category>
      <div>
        <lc-cell>
          <lc-countdown slot="title" showDays showPlainText :endTime="end" />
        </lc-cell>
      </div>

      <category title="控制开始和暂停的倒计时"></category>
      <div>
        <lc-cell>
          <lc-countdown slot="title" :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart"/>
          <div slot="desc">
            <lc-button type="default" small shape="circle" @click="toggle">
              <b style="font-size: 14px;">{{paused ? 'start': 'stop'}}</b>
            </lc-button>
          </div>
        </lc-cell>
      </div>

    </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
      end: Date.now() + 60 * 1000,
      paused: false
    };
  },
  methods: {
    toggle() {
      this.paused = !this.paused;
    },
    onend() {
      console.log('countdown: ended.');
    },
    onpaused(v) {
      console.log('paused: ', v);
    },
    onrestart(v) {
      console.log('restart: ', v);
    }
  }
};
</script>

<style lang="less" scoped>

</style>

可配置参数

字段	说明	类型	默认值
endTime	距离结束时间	String, Number	Date.now()
showDays	是否显示天	Boolean	false
showPlainText	显示为纯文本	Boolean	false
paused	是否暂停	Boolean	false

事件回调

字段	说明	回调参数
on-end	倒计时结束时	剩余时间戳
on-paused	暂停时	剩余时间戳
on-restart	暂停后重新启动时	剩余时间戳