Skip to content

Commit 38adea5

Browse files
committed
Modify the infinite function from property to event #75
1 parent e95d994 commit 38adea5

File tree

3 files changed

+19
-5
lines changed

3 files changed

+19
-5
lines changed

example/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">
66
<title>Vue-infinite-loading Simple</title>
77
<script src="../node_modules/vue/dist/vue.js"></script>
8-
<script src="../dist/vue-infinite-loading.js"></script>
8+
<script src="../vue-infinite-loading.js"></script>
99
<style>
1010
body{
1111
margin: 0;
@@ -28,7 +28,7 @@
2828
<body>
2929
<div id="app">
3030
<p class="example-list-item" v-for="item in list" v-text="item"></p>
31-
<infinite-loading :on-infinite="onInfinite" :distance="distance" ref="infiniteLoading"></infinite-loading>
31+
<infinite-loading @infinite="infiniteHandler" :distance="distance" ref="infiniteLoading"></infinite-loading>
3232
</div>
3333
<script>
3434
new Vue({
@@ -38,7 +38,7 @@
3838
list: []
3939
},
4040
methods: {
41-
onInfinite: function () {
41+
infiniteHandler: function () {
4242
if (this.list.length > 200) {
4343
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
4444
} else {

src/components/InfiniteLoading.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
</div>
1515
</template>
1616
<script>
17+
/* eslint-disable no-console */
18+
1719
const spinnerMapping = {
1820
bubbles: 'loading-bubbles',
1921
circles: 'loading-circles',
@@ -119,6 +121,10 @@
119121
this.scrollParent.addEventListener('scroll', this.scrollHandler);
120122
setTimeout(this.scrollHandler, 1);
121123
});
124+
125+
if (typeof this.onInfinite === 'function') {
126+
console.warn('[Vue-infinite-loading warn]: `:on-infinite` property will be deprecated soon, please use `@infinite` event instead.');
127+
}
122128
},
123129
/**
124130
* 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 @@
135141
const currentDistance = getCurrentDistance(this.scrollParent, this.$el, this.direction);
136142
if (!this.isComplete && currentDistance <= this.distance) {
137143
this.isLoading = true;
138-
this.onInfinite.call();
144+
145+
if (typeof this.onInfinite === 'function') {
146+
this.onInfinite.call();
147+
} else {
148+
this.$emit('infinite');
149+
}
139150
} else {
140151
this.isLoading = false;
141152
}

webpack.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ module.exports = {
1414
libraryTarget: 'umd'
1515
},
1616
resolve: {
17-
extensions: ['.js', '.vue']
17+
extensions: ['.js', '.vue'],
18+
alias: {
19+
'vue$': 'vue/dist/vue.min.js'
20+
}
1821
},
1922
module: {
2023
rules: [

0 commit comments

Comments
 (0)