[new feature] add CountDown component (#3805)

2019-07-10 20:20:59 +08:00
parent 577194b16d
commit 9fcc9086f7
16 changed files with 688 additions and 4 deletions
@@ -0,0 +1,114 @@
+# CountDown
+
+### Install
+
+``` javascript
+import { CountDown } from 'vant';
+
+Vue.use(CountDown);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-count-down :time="time" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      time: 30 * 60 * 60 * 1000
+    };
+  }
+}
+```
+
+### Custom Format
+
+```html
+<van-count-down
+  :time="time"
+  format="DD Day, HH:mm:ss"
+/>
+```
+
+### Millisecond
+
+```html
+<van-count-down
+  millisecond
+  :time="time"
+  format="HH:mm:ss:SSS"
+/>
+```
+
+### Custom Style
+
+```html
+<van-count-down :time="time">
+  <template v-slot="timeData">
+    <span class="item">{{ timeData.hours }}</span>
+    <span class="item">{{ timeData.minutes }}</span>
+    <span class="item">{{ timeData.seconds }}</span>
+  </template>
+</van-count-down>
+
+<style>
+.item {
+  display: inline-block;
+  width: 22px;
+  margin-right: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background-color: #1989fa;
+}
+</style>
+```
+
+### Manual Control
+
+```html
+<van-count-down
+  ref="countDown"
+  millisecond
+  :time="3000"
+  :auto-start="false"
+  format="ss:SSS"
+  @finish="finished"
+/>
+<van-grid clickable :column-num="3">
+  <van-grid-item text="Start" icon="play-circle-o" @click="start" />
+  <van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />
+  <van-grid-item text="Reset" icon="replay" @click="reset" />
+</van-grid>
+```
+
+```js
+export default {
+  methods: {
+    start() {
+      this.$refs.countDown.start();
+    },
+    pause() {
+      this.$refs.countDown.pause();
+    },
+    reset() {
+      this.$refs.countDown.reset();
+    },
+    finish() {
+      this.$toast('Finished');
+    }
+  }
+}
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|