Skip to content

Commit 42015bb

Browse files
snowyuPeachScript
authored andcommitted
feat: the forceUseInfiniteWrapper prop support css selector (#187)
* feat: the forceUseInfiniteWrapper could be a css selector * chore: forget to remove only flag
1 parent c64c9d7 commit 42015bb

File tree

2 files changed

+43
-6
lines changed

2 files changed

+43
-6
lines changed

src/components/InfiniteLoading.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -295,12 +295,18 @@ export default {
295295
getScrollParent(elm = this.$el) {
296296
let result;
297297
298-
if (elm.tagName === 'BODY') {
299-
result = window;
300-
} else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
301-
result = elm;
302-
} else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
303-
result = elm;
298+
if (typeof this.forceUseInfiniteWrapper === 'string') {
299+
result = elm.querySelector(this.forceUseInfiniteWrapper);
300+
}
301+
302+
if (!result) {
303+
if (elm.tagName === 'BODY') {
304+
result = window;
305+
} else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
306+
result = elm;
307+
} else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
308+
result = elm;
309+
}
304310
}
305311
306312
return result || this.getScrollParent(elm.parentNode);

test/unit/specs/InfiniteLoading.spec.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,4 +566,35 @@ describe('vue-infinite-loading', () => {
566566

567567
vm.$mount('#app');
568568
});
569+
570+
it('should find my forcible element as scroll wrapper when using `force-use-infinite-wrapper` as seletor', (done) => {
571+
vm = new Vue(Object.assign({}, basicConfig, {
572+
template: `
573+
<div class="scroll">
574+
<div style="overflow: auto;">
575+
<div style="overflow: auto;">
576+
<ul>
577+
<li v-for="item in list" v-text="item"></li>
578+
</ul>
579+
<infinite-loading
580+
:direction="direction"
581+
@infinite="infiniteHandler"
582+
ref="infiniteLoading"
583+
force-use-infinite-wrapper=".scroll"
584+
>
585+
</infinite-loading>
586+
</div>
587+
</div>
588+
</div>
589+
`,
590+
methods: {
591+
infiniteHandler: function infiniteHandler() {
592+
expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el);
593+
done();
594+
},
595+
},
596+
}));
597+
598+
vm.$mount('#app');
599+
});
569600
});

0 commit comments

Comments
 (0)