ElemeFE · masongzhi · Jun 29, 2019 · Jul 5, 2019 · Jul 5, 2019 · Jul 5, 2019
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/README.MD b/README.MD
@@ -55,7 +55,7 @@ Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* a
 The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.
 
 ```HTML
-<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+<div v-infinite-scroll:loadMore="{disabledKey: 'busy', distance: 10}">
   ...
 </div>
 ```
@@ -84,15 +84,24 @@ new Vue({
 });
 ```
 
+## if execute is a Promise
+if execute is a Promise, it will be disabled when executing.
+```js
+if (window.Promise && this.vm[executeName] instanceof window.Promise) {
+  this.config._disabled = true;
+  this.vm[executeName]().finally(() => (this.config._disabled = false));
+}
+```
+
 # Options
 
 | Option | Description |
 | ----- | ----- |
-| infinite-scroll-disabled | infinite scroll will be disabled if the value of this attribute is true. |
-| infinite-scroll-distance | Number(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed. |
-| infinite-scroll-immediate-check | Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container. |
-| infinite-scroll-listen-for-event | infinite scroll will check again when the event is emitted in Vue instance. |
-| infinite-scroll-throttle-delay | Number(default = 200) - interval(ms) between next time checking and this time  |
+| disabledKey | infinite scroll will be disabled if the key of this vm.attribute is true. |
+| distance | Number(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed. |
+| immediateCheck | Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container. |
+| eventName | infinite scroll will check again when the event is emitted in Vue instance. |
+| throttleDelay | Number(default = 200) - interval(ms) between next time checking and this time  |
 
 ## Development
 

diff --git a/bower.json b/bower.json
diff --git a/example/index.html b/example/index.html
@@ -1,40 +1,43 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>vue-infinite-scroll</title>
-</head>
-<body>
-<div class="app"
-     style="height: 1200px;background-color: #ccc;width: 400px;margin: 0 auto;"
-     v-infinite-scroll="loadMore"
-     infinite-scroll-disabled="busy"
-     infinite-scroll-distance="10">
-</div>
-<script src="https://cdn.css.net/libs/vue/2.0.3/vue.js"></script>
-<script src="../vue-infinite-scroll.js"></script>
-<script>
-  var app = document.querySelector('.app')
-  new Vue({
-    el: app,
-    data: function () {
-      return {busy: false}
-    },
-    methods: {
-      loadMore: function () {
-        var self = this;
-        self.busy = true;
-        console.log('loading... ' + new Date());
-        setTimeout(function () {
-          var app = document.querySelector('.app')
-          var height = app.clientHeight;
-          app.style.height = height + 300 + 'px';
-          console.log('end... ' + new Date());
-          self.busy = false
-        }, 1000)
-      }
-    }
-  })
-</script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>vue-infinite-scroll</title>
+  </head>
+  <body>
+    <!--TODO loadMore传到directive变成loadmore-->
+    <div
+      class="app"
+      style="height: 1200px;background-color: #ccc;width: 400px;margin: 0 auto;"
+      v-infinite-scroll:loadMore="{
+      disabledKey: 'busy',
+      distance: 10
+     }"
+    ></div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="../vue-infinite-scroll.js"></script>
+    <script>
+      var app = document.querySelector('.app');
+      new Vue({
+        el: app,
+        data: function() {
+          return { busy: false };
+        },
+        methods: {
+          loadMore: function() {
+            var self = this;
+            self.busy = true;
+            console.log('loading... ' + new Date());
+            setTimeout(function() {
+              var app = document.querySelector('.app');
+              var height = app.clientHeight;
+              app.style.height = height + 300 + 'px';
+              console.log('end... ' + new Date());
+              self.busy = false;
+            }, 1000);
+          }
+        }
+      });
+    </script>
+  </body>
 </html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -1,81 +1,67 @@
 // Karma configuration
-// Generated on Tue Mar 08 2016 13:37:35 GMT+0800 (CST)
+// Generated on Sat Jun 29 2019 11:46:16 GMT+0800 (China Standard Time)
 
 module.exports = function(config) {
   config.set({
-
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
+    basePath: "",
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
+    frameworks: ["jasmine"],
 
     // list of files / patterns to load in the browser
-    files: [
-      'test/**/*.js'
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-    ],
+    files: ["test/**/*.test.js"],
 
+    // list of files / patterns to exclude
+    exclude: [],
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'test/**/*.js': ['rollup']
+      "test/**/*.js": ["rollup"]
     },
 
-    rollupPreprocessor: {
-      rollup: {
-        plugins: [
-          require('rollup-plugin-babel')({
-            exclude: 'node_modules/**',
-            presets: [
-              require('babel-preset-es2015-rollup')
-            ]
-          }),
-          require('rollup-plugin-node-resolve')({
-            jsnext: true,
-            main: true
-          }),
-          require('rollup-plugin-commonjs')(),
-          require('rollup-plugin-env')({})
-        ]
-      },
-      bundle: {
-        sourceMap: 'inline'
-      }
-    },
-
-
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
+    reporters: ["progress"],
 
+    rollupPreprocessor: {
+      /**
+       * This is just a normal Rollup config object,
+       * except that `input` is handled for you.
+       */
+      plugins: [
+        require("rollup-plugin-babel")({
+          exclude: "node_modules/**",
+          presets: [require("@babel/preset-env")]
+        }),
+        require('rollup-plugin-node-globals')(),
+        // require('rollup-plugin-commonjs')(),
+        // require('rollup-plugin-json')(),
+        require('rollup-plugin-node-resolve')(),
+      ],
+      output: {
+        format: "iife", // Helps prevent naming collisions.
+        name: "vueInfiniteScroll", // Required for 'iife' format.
+        sourcemap: "inline" // Sensible for testing.
+      }
+    },
 
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
 
-
     // enable / disable watching file and executing tests whenever any file changes
     autoWatch: true,
 
-
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     browsers: ['PhantomJS_custom'],
@@ -90,19 +76,17 @@ module.exports = function(config) {
       }
     },
 
-
     phantomjsLauncher: {
       // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
       exitOnResourceError: true
     },
 
-
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
     singleRun: true,
 
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity
-  })
-}
+  });
+};