lc-countdown

倒计时组件

效果

使用方法

<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <title title="lc-countdown"></title>
      <category title="基础使用"></category>
      <text class="demo-desc">默认样式，时间戳传5秒后，倒计时完传回调</text>
      <div class="demo-3">
        <text class="cb-text">{{demoText}}:</text>
        <lc-countdown
          :time="demoTime"
          @wxcOnComplete="onCompletedTwo">
        </lc-countdown>
      </div>

      <category title="自定义配置"></category>
      <text class="demo-desc">配置样式，设置倒计时频率</text>

      <lc-countdown
        :interval="2000"
        tpl="{h}时"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{m}分"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '70px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{s}秒"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '80px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{m}分{s}秒"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{h}时{m}分"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>


      <lc-countdown
        :interval="2000"
        tpl="{h}时{m}分{s}秒"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{d}天{h}时{m}分{s}秒"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

      <lc-countdown
        :interval="2000"
        tpl="{d}天{h}:{m}:{s}"
        :timeBoxStyle="{backgroundColor: '#399DE2', height: '50px', width: '50px'}"
        :timeTextStyle="{fontSize: '24px', color: '#ffffff'}"
        :dotTextStyle="{color: '#399DE2', fontSize: '26px'}"
        :dotBoxStyle="{width: '30px'}"
        :style="{marginTop: '10px', justifyContent: 'center'}"
        :time="TIME">
      </lc-countdown>

    </scroller>
  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
  .demo-desc {
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 30px;
    color: rgb(102, 102, 102);
    text-align: center;
  }
  .demo-3 {
    margin-top: 30px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .scroller {
    flex: 1;
  }
</style>

<script>
  import Light from 'light';
  const modal = Light.requireModule('modal');

  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';

  import LcCountdown from 'lighting-ui/packages/lc-countdown'

  export default {
    components: { Title, Category, LcCountdown },
    data: () => ({
      // TIME: new Date().getTime() + 86400000 + ''
      TIME: new Date().getTime() + 100000000,
      demoTime: new Date().getTime() + 5000,
      callbackText: '',
      demoText: '距离开始'
    }),
    methods: {
      onCompleted () {
        this.callbackText = '倒计时完成了';
        modal.toast({
          message: '倒计时完成了'
        })
      },
      onCompletedTwo () {
        this.demoTime = new Date().getTime() + 5000;
        this.demoText = this.demoText === '距离开始' ? '距离结束' : '距离开始';
        modal.toast({
          message: '倒计时完成了'
        })
      }
    }
  }
</script>

可配置参数

Prop	Type	Required	Default	Description
time	Number	Y	1501200000000	最终时间戳
interval	Number	N	1000	间隔,单位为”毫秒”
tpl	String	N	{h}:{m}:{s}	展示模板
onComplete	Function	N	()=>()	完成时调用的方法
timeWrapStyle	Object	N	-	最外层包裹 style
timeBoxStyle	Object	N	-	数字盒子 style
dotBoxStyle	Object	N	-	符号盒子 style
timeTextStyle	Object	N	-	数字文字 style
dotTextStyle	Object	N	-	符号文字 style