examples/vue/components/countdown.vue

<template>
  <scroller>
    <panel title="Countdown" type="primary">
      <countdown
        @tick="tick($event, 'countdown1')"
        :remain="countdown1.remain"
        style="width: 750; margin-top: 20; margin-bottom: 20;">
        <text class="ctno1">{{countdown1.time.D}}</text>
        <text class="ctno1" style="background-color: #FFFFFF; color: #AAAAAA;">day(s)</text>
        <text class="ctno1">{{countdown1.time.hh}}</text>
        <text class="ctno1" style="background-color: #FFFFFF; color: #AAAAAA;">hour(s)</text>
        <text class="ctno1">{{countdown1.time.mm}}</text>
        <text class="ctno1" style="background-color: #FFFFFF; color: #AAAAAA;">minute(s)</text>
        <text class="ctno1">{{countdown1.time.ss}}</text>
        <text class="ctno1" style="background-color: #FFFFFF; color: #AAAAAA;">second(s)</text>
      </countdown>

      <countdown
        @tick="tick($event, 'countdown2')"
        :remain="countdown2.remain"
        style="width: 600;">
        <text class="ctno2">{{countdown2.time.MM}}</text>
        <text class="ctno2" style="background-color: #FFFFFF; color: #AAAAAA;">:</text>
        <text class="ctno2">{{countdown2.time.ss}}</text>
      </countdown>
    </panel>
  </scroller>
</template>

<style scoped>
  .ctno1 {
    border-radius: 8;
    padding-top: 6;
    padding-bottom: 6;
    padding-right: 4;
    padding-left: 4;
    margin-left: 2;
    margin-right: 2;
    background-color: rgb(242, 222, 222);
    color: rgb(169, 68, 66);
  }

  .ctno2 {
    border-radius: 8;
    padding-top: 30;
    padding-bottom: 30;
    padding-left: 16;
    padding-right: 16;
    background-color: rgb(217, 237, 247);
    color: rgb(49, 112, 143);
    text-align: center;
    font-size: 40;
  }
</style>

<script>
  module.exports = {
    data: function () {
      return {
        countdown1: {
          remain: 5000,
          time: {
            D: '0',
            hh: '00',
            mm: '00',
            ss: '00'
          }
        },
        countdown2: {
          remain: 5000,
          time: {
            MM: '0',
            ss: '0'
          }
        }
      }
    },
    components: {
      panel: require('../include/panel.vue'),
      countdown: require('../include/countdown.vue')
    },
    methods: {
      tick: function (e, k) {
        this[k].time = JSON.parse(JSON.stringify(e))
      }
    }
  }
</script>