add pull to refresh component

Author: ttian226

docs/examples-docs/zh-CN/pulltorefresh.md

@@ -0,0 +1,59 @@
+<style>
+
+</style>
+<script>
+export default {
+  data () {
+    return {
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      height: document.documentElement.clientHeight,
+      refreshing: false,
+      down: true
+    }
+  },
+  methods: {
+    toggle () {
+      this.down = !this.down;
+    }
+  }
+}
+</script>
+## PullToRefresh 拉动刷新
+
+### 使用指南
+```javascript
+import { Pulltorefresh } from 'milk-vue';
+Vue.component(Pulltorefresh.name, Pulltorefresh);
+```
+
+### 代码演示
+
+:::demo
+```html
+<v-button @click="toggle">{{ down ? 'down' : 'up' }}</v-button>
+<v-pull-to-refresh
+  :style="{ height: height, overflow: 'auto' }"
+  :refreshing="refreshing"
+  :direction="down ? 'down' : 'up'"
+  :indicator="down ? {} : { deactivate: '上拉可以刷新' }"
+>
+  <div 
+    v-for="(item, index) in list" 
+    :style="{ textAlign: 'center', padding: '20px' }" 
+    :key="item"
+  >
+    {{ down ? 'pull down' : 'pull up' }} {{index}}
+  </div>
+</v-pull-to-refresh>
+```
+:::
+
+### API
+
+| 属性       | 说明      | 类型       | 默认值       |
+|-----------|-----------|-----------|-------------|
+| direction | 拉动方向可以是`up`或`down` | `String`  | `down` |
+| distanceToRefresh | 刷新距离 | `number`  | 25 |
+| refreshing | 是否显示刷新状态 | `bool`  | `false` |
+| onRefresh | 刷新回调函数 | `(): void`  |    |
+| indicator | 指示器配置 | `Object`  |    |

docs/src/doc.config.js

@@ -128,6 +128,9 @@ module.exports = {
           'list': [{
             'path': '/swipeaction',
             'title': 'SwipeAction - 滑动操作'
+          }, {
+            'path': '/pulltorefresh',
+            'title': 'PullToRefresh - 拉动刷新'
           }]
         }]
       }

package-lock.json

@@ -44,6 +44,7 @@
     "babel-runtime": "6.x",
     "v-drawer": "^1.0.9",
     "v-feedback": "^0.1.13",
+    "v-pull-to-refresh": "^1.0.2",
     "v-swipeout": "^1.0.7",
     "v-tooltip": "^2.0.0-rc.25",
     "vue": "^2.5.11",

package.json

@@ -13,6 +13,7 @@ import Navbar from './navbar';
 import Pagination from './pagination';
 import Popover from './popover';
 import Progress from './progress';
+import Pulltorefresh from './pulltorefresh';
 import Radio from './radio';
 import Row from './row';
 import Stepper from './stepper';
@@ -39,6 +40,7 @@ const components = [
   Pagination,
   Popover,
   Progress,
+  Pulltorefresh,
   Radio,
   Row,
   Stepper,
@@ -78,6 +80,7 @@ export {
   Pagination,
   Popover,
   Progress,
+  Pulltorefresh,
   Radio,
   Row,
   Stepper,

packages/index.js

@@ -0,0 +1,3 @@
+import VPullToRefresh from './pulltorefresh.vue';
+
+export default VPullToRefresh;

packages/pulltorefresh/index.js

@@ -0,0 +1,49 @@
+<template>
+  <pull-to-refresh
+    prefixCls='vm-pull-to-refresh'
+    :direction="direction"
+    :distanceToRefresh="distanceToRefresh"
+    :refreshing="refreshing"
+    :onRefresh="onRefresh"
+    :indicator="Object.assign(INDICATOR, indicator)"
+  >
+    <slot></slot>
+  </pull-to-refresh>
+</template>
+
+<script>
+import PullToRefresh from 'v-pull-to-refresh';
+
+const INDICATOR = {
+  activate: '松开立即刷新',
+  deactivate: '下拉可以刷新',
+  release: '加载中',
+  finish: '完成刷新',
+};
+
+export default {
+  name: 'VPullToRefresh',
+  data () {
+    return {
+      INDICATOR
+    }
+  },
+  props: {
+    direction: {
+      type: String,
+      default: 'down'
+    },
+    distanceToRefresh: {
+      type: Number,
+      default: 25
+    },
+    refreshing: false,
+    indicator: Object,
+    className: String,
+    onRefresh: Function
+  },
+  components: {
+    PullToRefresh
+  }
+}
+</script>

packages/pulltorefresh/pulltorefresh.vue

@@ -14,6 +14,7 @@
 @import "./mixins/menu.less";
 @import "./mixins/popover.less";
 @import "./mixins/swipeactioin.less";
+@import "./mixins/pulltorefresh.less";
 @import "./mixins/progress.less";
 @import "./mixins/pagination.less";
 @import "./mixins/stepper.less";

style/mixins.less

@@ -0,0 +1,30 @@
+@import "../themes/default";
+
+@pull-to-refresh: vm-pull-to-refresh;
+
+.@{pull-to-refresh} {
+  &-content {
+    &-wrapper {
+      overflow: hidden;
+    }
+    transform-origin: left top 0;
+  }
+
+  &-transition {
+    transition: transform 0.3s;
+  }
+
+  &-indicator {
+    color: grey;
+    text-align: center;
+    height: 25 * @hd;
+  }
+
+  &-down .@{pull-to-refresh}-indicator {
+    margin-top: -25 * @hd;
+  }
+
+  &-up .@{pull-to-refresh}-indicator {
+    margin-bottom: -25 * @hd;
+  }
+}