---
nav: default
---
### Countdown
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fcountdown"/>
<a href="demo/#/component/countdown" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/countdown</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/countdown" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="auto countdown">
      <cell
        title="15s"
        :value="value"
      >
        <countdown
          v-show="show"
          slot="value"
          v-model="options1"
          @on-finish="finish"
        />
      </cell>
    </group>
    <group title="manually">
      <x-switch
        v-model="options2.start"
        title="start"
      />
      <cell title="15s">
        <countdown
          slot="value"
          v-model="options2"
          :start="options2.start"
          @on-finish="finish2"
        />
      </cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell, Countdown, XSwitch } from '../components/_index'

export default {
  components: {
    Group,
    Cell,
    Countdown,
    XSwitch
  },
  data () {
    return {
      options1: {
        time: 15,
        start: true
      },
      options2: {
        time: 15,
        start: false
      },
      show: true,
      time: 15,
      value: '',
      start: false
    }
  },
  methods: {
    finish (index) {
      this.show = false
      this.value = 'completed'
    },
    finish2 (index) {
      this.options2.start = false
      // this.time = 20
      this.options2.time = 20
    }
  }
}
</script>

```

#### Github Issue