infiniteScroll: add infiniteScroll component (#15567)

build/bin/build-entry.js

@@ -27,6 +27,7 @@ const install = function(Vue, opts = {}) {
     Vue.component(component.name, component);
   });
 
+  Vue.use(InfiniteScroll);
   Vue.use(Loading.directive);
 
   Vue.prototype.$ELEMENT = {
@@ -76,7 +77,7 @@ ComponentNames.forEach(name => {
     package: name
   }));
 
-  if (['Loading', 'MessageBox', 'Notification', 'Message'].indexOf(componentName) === -1) {
+  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
     installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
       name: componentName,
       component: name

components.json

@@ -73,5 +73,6 @@
   "link": "./packages/link/index.js",
   "divider": "./packages/divider/index.js",
   "image": "./packages/image/index.js",
-  "calendar": "./packages/calendar/index.js"
+  "calendar": "./packages/calendar/index.js",
+  "infiniteScroll": "./packages/infiniteScroll/index.js"
 }

examples/demo-styles/index.scss

@@ -41,3 +41,4 @@
 @import "./upload.scss";
 @import "./divider.scss";
 @import "./image.scss";
+@import "./infiniteScroll.scss";

examples/demo-styles/infiniteScroll.scss

@@ -0,0 +1,48 @@
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow: auto;
+
+  .infinite-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background: #e8f3fe;
+    margin: 10px;
+    color: lighten(#1989fa, 20%);
+    & + .list-item {
+      margin-top: 10px
+    }
+  } 
+}
+
+.infinite-list-wrapper {
+  height: 300px;
+  overflow: auto;
+  text-align: center;
+
+  .list{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+
+  .list-item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background: #fff6f6;
+    color: #ff8484;
+    & + .list-item {
+      margin-top: 10px
+    }
+  }
+}
+
+
+

examples/docs/en-US/infiniteScroll.md

@@ -0,0 +1,87 @@
+## InfiniteScroll
+
+Load more data while reach bottom of the page
+
+### Basic usage
+Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disable Loading
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">loading...</p>
+    <p v-if="noMore">Mo more</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| Attribute | Description | Type  | Accepted values | Default   |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | is disabled           | boolean      | - |false |
+| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |
+| infinite-scroll-distance| trigger distance (px) | number   |- |0 |
+| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |

examples/docs/es/infiniteScroll.md

@@ -0,0 +1,87 @@
+## InfiniteScroll
+
+Load more data while reach bottom of the page
+
+### Basic usage
+Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disable Loading
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">loading...</p>
+    <p v-if="noMore">Mo more</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| Attribute | Description | Type  | Accepted values | Default   |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | is disabled           | boolean      | - |false |
+| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |
+| infinite-scroll-distance| trigger distance (px) | number   |- |0 |
+| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |

examples/docs/fr-FR/infiniteScroll.md

@@ -0,0 +1,87 @@
+## InfiniteScroll
+
+Load more data while reach bottom of the page
+
+### Basic usage
+Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disable Loading
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">loading...</p>
+    <p v-if="noMore">Mo more</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| Attribute | Description | Type  | Accepted values | Default   |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | is disabled           | boolean      | - |false |
+| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |
+| infinite-scroll-distance| trigger distance (px) | number   |- |0 |
+| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |