[Improvement] Reorganize document (#1066)

2018-05-15 10:39:01 +08:00
parent b1142fd862
commit e8aad7246c
124 changed files with 181 additions and 186 deletions
@@ -0,0 +1,68 @@
+## PullRefresh
+
+### Install
+``` javascript
+import { PullRefresh } from 'vant';
+
+Vue.use(PullRefresh);
+```
+
+### Usage
+
+#### Basic Usage
+The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
+
+```html
+<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+  <p>Refresh Count: {{ count }}</p>
+</van-pull-refresh>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    }
+  },
+
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast('Refresh Success');
+        this.isLoading = false;
+        this.count++;
+      }, 500);
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| v-model | Loading status | `Boolean` | - |
+| pulling-text | Text to show when pulling | `String` | `Pull to refresh...` |
+| loosing-text | Text to show when loosing | `String` | `Loose to refresh...` |
+| loading-text | Text to show when loading | `String` | `Loading...` |
+| animation-duration | Animation duration | `Number` | `300` |
+| head-height | Height of head | `Number` | `50` |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| refresh | Triggered when pull refresh | - |
+
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| normal | Content of head when at normal status |
+| pulling | Content of head when at pulling |
+| loosing | Content of head when at loosing |
+| loading | Content of head when at loading |
@@ -0,0 +1,67 @@
+## PullRefresh 下拉刷新
+
+### 使用指南
+``` javascript
+import { PullRefresh } from 'vant';
+
+Vue.use(PullRefresh);
+```
+
+### 代码演示
+
+#### 基础用法
+下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
+
+```html
+<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+  <p>刷新次数: {{ count }}</p>
+</van-pull-refresh>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    }
+  },
+
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+        this.count++;
+      }, 500);
+    }
+  }
+}
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| v-model | 是否在加载中 | `Boolean` | - |
+| pulling-text | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` |
+| loosing-text | 释放过程中顶部文案 | `String` | `释放即可刷新...` |
+| loading-text | 加载过程中顶部文案 | `String` | `加载中...` |
+| animation-duration | 动画时长 | `Number` | `300` |
+| head-height | 顶部内容高度 | `Number` | `50` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| refresh | 下拉刷新时触发 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 自定义内容 |
+| normal | 非下拉状态时顶部内容 |
+| pulling | 下拉过程中顶部内容 |
+| loosing | 释放过程中顶部内容 |
+| loading | 加载过程中顶部内容 |