Modify the infinite function from property to event #75

PeachScript · PeachScript · commit 38adea570ca9 · 2017-09-15T21:36:53.000+08:00
diff --git a/example/index.html b/example/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">
   <title>Vue-infinite-loading Simple</title>
   <script src="../node_modules/vue/dist/vue.js"></script>
-  <script src="../dist/vue-infinite-loading.js"></script>
+  <script src="../vue-infinite-loading.js"></script>
   <style>
     body{
       margin: 0;
@@ -28,7 +28,7 @@
 <body>
   <div id="app">
     <p class="example-list-item" v-for="item in list" v-text="item"></p>
-    <infinite-loading :on-infinite="onInfinite" :distance="distance" ref="infiniteLoading"></infinite-loading>
+    <infinite-loading @infinite="infiniteHandler" :distance="distance" ref="infiniteLoading"></infinite-loading>
   </div>
   <script>
     new Vue({
@@ -38,7 +38,7 @@
         list: []
       },
       methods: {
-        onInfinite: function () {
+        infiniteHandler: function () {
           if (this.list.length > 200) {
             this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
           } else {
diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue
@@ -14,6 +14,8 @@
   </div>
 </template>
 <script>
+  /* eslint-disable no-console */
+
   const spinnerMapping = {
     bubbles: 'loading-bubbles',
     circles: 'loading-circles',
@@ -119,6 +121,10 @@
         this.scrollParent.addEventListener('scroll', this.scrollHandler);
         setTimeout(this.scrollHandler, 1);
       });
+
+      if (typeof this.onInfinite === 'function') {
+        console.warn('[Vue-infinite-loading warn]: `:on-infinite` property will be deprecated soon, please use `@infinite` event instead.');
+      }
     },
     /**
      * To adapt to keep-alive feature, but only work on Vue 2.2.0 and above, see: https://vuejs.org/v2/api/#keep-alive
@@ -135,7 +141,12 @@
         const currentDistance = getCurrentDistance(this.scrollParent, this.$el, this.direction);
         if (!this.isComplete && currentDistance <= this.distance) {
           this.isLoading = true;
-          this.onInfinite.call();
+
+          if (typeof this.onInfinite === 'function') {
+            this.onInfinite.call();
+          } else {
+            this.$emit('infinite');
+          }
         } else {
           this.isLoading = false;
         }
diff --git a/webpack.config.js b/webpack.config.js
@@ -14,7 +14,10 @@ module.exports = {
     libraryTarget: 'umd'
   },
   resolve: {
-    extensions: ['.js', '.vue']
+    extensions: ['.js', '.vue'],
+    alias: {
+      'vue$': 'vue/dist/vue.min.js'
+    }
   },
   module: {
     rules: [
