新增spinner组件;新增infinite-scroll组件;部分组件代码优化。

.eslintrc.js

@@ -21,6 +21,8 @@ module.exports = {
     // function括号前面的空格是否必需
     'space-before-function-paren': 0,
     // 行末分号是否必需
-    'semi': 0
+    'semi': 0,
+    // 允许尾随空格
+    'no-trailing-spaces': 0
   }
 }

build/bin/build-entry.js

@@ -14,6 +14,7 @@ const install = function(Vue) {
   if (install.installed) return
 
 {{install}}
+  Vue.use(InfiniteScroll);
 }
 
 // auto install
@@ -65,6 +66,8 @@ componentNames.forEach(name => {
   }));
 
   if ([
+    // directives
+    'InfiniteScroll'
   ].indexOf(componentName) === -1) {
     installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
       name: componentName,

examples/navs.json

@@ -96,6 +96,11 @@
         "path": "/icon",
         "name": "Icons",
         "icon": "icons"
+      },
+      {
+        "path": "/spinner",
+        "name": "Spinner",
+        "icon": "Spinner"
       }
     ]
   },

examples/page-content.vue

@@ -13,6 +13,7 @@ export default {
 <style lang="less">
   @import "../src/less/variables.less";
   .page-content {
+    position: relative;
     padding: @content-spacing;
   }
 

examples/pages/indicator.vue

@@ -48,12 +48,6 @@ export default {
 
 <style lang="less" scoped>
   .page-content {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 !important;
-
     .btn {
       margin-top: 15px;
     }

examples/pages/infinite-scroll.vue

@@ -1,10 +1,87 @@
 <template>
   <div>
     <vui-header fixed>Infinite Scroll</vui-header>
+    <div class="infinite-scroll-wrapper">
+      <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="20">
+        <vui-list>
+          <vui-list-item v-for="item in pager.list">{{item}}</vui-list-item>
+        </vui-list>
+        <div class="spinner-wrapper">
+          <vui-spinner v-if="pager.hasNext" type="spinner2"></vui-spinner>
+          {{pager.hasNext ? 'Loading...' : '没有更多了...'}}
+        </div>
+      </div>    
+    </div>
   </div>
 </template>
 
+<style lang="less" scoped>
+  .infinite-scroll-wrapper {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 44px;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .spinner-wrapper {
+    height: 44px;
+    line-height: 44px;
+    background-color: #fff;
+    color: #999;
+    text-align: center;
+    .spinner {
+      margin-right: 5px;
+      vertical-align: -4px;
+    }
+  }
+</style>
+
 <script>
 export default {
+  data: function() {
+    return {
+      pager: {
+        list: [],
+        loading: false,
+        page: 1,
+        pageSize: 20,
+        totalPage: 5,
+        hasNext: true
+      }
+    }
+  },
+  computed: {
+    busy() {
+      return this.pager.loading || !this.pager.hasNext
+    }
+  },
+  mounted() {
+    let pager = this.pager
+    for (let i = 1; i <= pager.pageSize; i++) {
+      pager.list.push(i);
+    }
+  },
+  methods: {
+    loadMore: function() {
+      console.log('loadMore')
+      let pager = this.pager
+
+      // 把loading设为ture，以屏蔽infinite-scroll绑定的事件
+      // 避免在加载数据时，上下滚动屏幕而使得loadMore再次触发
+      pager.loading = true
+
+      setTimeout(() => {
+        let last = pager.list[pager.list.length - 1];
+        for (let i = 1; i <= pager.pageSize; i++) {
+          pager.list.push(last + i);
+        }
+        pager.page += 1
+        pager.loading = false
+        pager.hasNext = pager.page < pager.totalPage
+      }, 1000);
+    }
+  }
 }
 </script>

examples/pages/spinner.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <vui-header fixed>Spinner</vui-header>
+    <page-content>
+      <vui-list>
+        <vui-list-item>
+          spinner<vui-spinner type="spinner" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner1<vui-spinner type="spinner1" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner2<vui-spinner type="spinner2" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner3<vui-spinner type="spinner3" slot="after"></vui-spinner>
+        </vui-list-item>
+      </vui-list>
+    </page-content>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .page-content {
+    padding: 0;
+  }
+</style>
+
+<script>
+export default {
+}
+</script>

examples/pages/toast.vue

@@ -39,12 +39,6 @@ export default {
 
 <style lang="less" scoped>
   .page-content {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 !important;
-
     .btn {
       margin-top: 15px;
     }

src/components/action-sheet.vue

@@ -2,7 +2,7 @@
   <vui-modal type="actionsheet" transition="slide-up" :show="show">
     <slot></slot>
     <template slot="footer" v-if="cancelButton">
-      <vui-action-sheet-button @click="handleCancel">{{cancelButtonText}}</vui-action-sheet-button>
+      <vui-action-sheet-button @click="$emit('cancel', $event)">{{cancelButtonText}}</vui-action-sheet-button>
     </template>
   </vui-modal>
 </template>
@@ -31,11 +31,6 @@ export default {
       type: String,
       default: '取消'
     }
-  },
-  methods: {
-    handleCancel($evt) {
-      this.$emit('cancel', $evt)
-    }
   }
 }
 </script>

src/components/alert.vue

@@ -5,7 +5,7 @@
     </template>
     <slot></slot>
     <template slot="footer">
-      <vui-button size="large" @click="handleClick">{{buttonText}}</vui-button>
+      <vui-button size="large" @click="$emit('ok', $event)">{{buttonText}}</vui-button>
     </template>
   </vui-modal>
 </template>
@@ -34,11 +34,6 @@ export default {
       type: String,
       default: '确定'
     }
-  },
-  methods: {
-    handleClick($evt) {
-      this.$emit('ok', $evt)
-    }
   }
 }
 </script>

src/components/button.vue

@@ -1,10 +1,9 @@
 <template>
   <button 
-    class="btn" 
     :class="btnClasses"
     :type="nativeType"
     :disabled="disabled"
-    @click="handleClick">
+    @click="$emit('click', $event)">
     <slot></slot>
   </button>
 </template>
@@ -42,18 +41,14 @@ export default {
   computed: {
     btnClasses() {
       const classes = {
+        'btn': true,
         [`btn-${this.type}`]: true,
         [`btn-${this.size}`]: true,
         'btn-plain': this.plain,
         'btn-disabled': this.disabled
       }
       return classes
     }
-  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt)
-    }
   }
 }
 </script>

src/components/confirm.vue

@@ -2,8 +2,8 @@
   <vui-modal type="confirm" :show="show">
     <slot></slot>
     <template slot="footer">
-      <vui-button class="btn-cancel" size="large" @click="onCancel">{{cancelButtonText}}</vui-button>
-      <vui-button class="btn-ok" size="large" @click="onConfirm">{{confirmButtonText}}</vui-button>
+      <vui-button class="btn-cancel" size="large" @click="$emit('cancel', $event)">{{cancelButtonText}}</vui-button>
+      <vui-button class="btn-ok" size="large" @click="$emit('ok', $event)">{{confirmButtonText}}</vui-button>
     </template>
   </vui-modal>
 </template>
@@ -32,14 +32,6 @@ export default {
       type: String,
       default: '取消'
     }
-  },
-  methods: {
-    onConfirm($evt) {
-      this.$emit('ok', $evt)
-    },
-    onCancel($evt) {
-      this.$emit('cancel', $evt)
-    }
   }
 }
 </script>

src/components/icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i class="icon" :class="'icon-' + type" @click="handleClick"></i>
+  <i :class="'icon icon-' + type" @click="$emit('click', $event)"></i>
 </template>
 
 <script>
@@ -10,11 +10,6 @@ export default {
       type: String,
       required: true
     }
-  },
-  methods: {
-    handleClick($evt) {
-      this.$emit('click', $evt)
-    }
   }
 }
 </script>

src/components/indicator.vue

@@ -2,7 +2,8 @@
   <div class="indicator" :class="{[`indicator-${type}`]: true}" >
     <vui-overlay v-show="show" :transparent="true"></vui-overlay>
     <vui-toast :show="show" @toggle-visible="toggleVisible">
-      <vui-icon :type="type === 'loading' ? 'spinner' : type" slot="icon"></vui-icon>
+      <vui-spinner v-if="type==='loading'" type="spinner" slot="icon"></vui-spinner>
+      <vui-icon v-else :type="type" slot="icon"></vui-icon>
       <slot></slot>
     </vui-toast>
   </div>    
@@ -12,13 +13,15 @@
 import VuiOverlay from './overlay'
 import VuiToast from './toast'
 import VuiIcon from './icon'
+import VuiSpinner from './spinner'
 
 export default {
   name: 'vui-indicator',
   components: {
     VuiOverlay,
     VuiToast,
-    VuiIcon
+    VuiIcon,
+    VuiSpinner
   },
   props: {
     show: {