Skip to content
This repository was archived by the owner on Jul 1, 2023. It is now read-only.

Commit 0050941

Browse files
committed
Notify item component about resizing
1 parent 054d3c1 commit 0050941

File tree

4 files changed

+28
-14
lines changed

4 files changed

+28
-14
lines changed

README.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ npm run serve
8080
* `itemHeight`: approximate item height in pixels. it's used only at first rendering
8181
* `itemComponent`: vue js item component
8282
* `renderViewports`: height of the rendered part relative to viewport height. For example, if it's set to 5 and window inner height is 400, it will render 800 pixels before and after visible part of the list
83+
* `onItemResize`: the name of the item component function that is called on item resize
8384

8485
## Events
8586

@@ -101,12 +102,6 @@ These properties are passed to the item component, all are optional.
101102
* `index (Number)`: index of the item in the itemsData array
102103
* `data (Object)`: data of the item from itemsData array
103104

104-
## Methods
105-
106-
These methods can be called by the ListScroller, all are optional.
107-
108-
* `onResize()`: called after item resizing
109-
110105
# Similar projects
111106

112107
* [vue-virtual-scroll-list](https://github.com/tangbc/vue-virtual-scroll-list)

src/listscroller.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export default {
2828
itemComponent: { type: [Object, Function], required: true },
2929
// Height of rendered part relative to viewport height
3030
renderViewports: { type: Number, default: 3 },
31+
// The name of the item component function that is called on item resize
32+
onItemResize: String,
3133
},
3234
3335
data() {
@@ -177,7 +179,7 @@ export default {
177179
this.heights.set(idx, newHeight)
178180
changed = true
179181
}
180-
if (el.__vue__.onResize) el.__vue__.onResize()
182+
if (this.onItemResize) el.__vue__[this.onItemResize]()
181183
}
182184
})
183185

tests/item.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@ export default {
88
data: Object,
99
index: Number,
1010
},
11+
methods: {
12+
resized() {},
13+
},
1114
}
1215
</script>

tests/listscroller.test.js

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -370,13 +370,6 @@ describe('ListScroller component', () => {
370370
await wrapper.vm.$nextTick()
371371
expect(wrapper.element).toMatchSnapshot()
372372
})
373-
374-
it('calls onResize method after item resize', async () => {
375-
const item = wrapper.findAllComponents(Item).at(0).vm
376-
item.onResize = jest.fn()
377-
updateSizes(12)
378-
expect(item.onResize).toBeCalledTimes(1)
379-
})
380373
})
381374

382375
describe('with smaller real item height', () => {
@@ -489,6 +482,27 @@ describe('ListScroller component', () => {
489482
})
490483
})
491484

485+
describe('onItemResize method', () => {
486+
let wrapper
487+
beforeEach(() => {
488+
wrapper = mount(ScrollerMock, {
489+
propsData: {
490+
itemComponent: Item,
491+
itemsData,
492+
itemHeight: 20,
493+
onItemResize: 'resized',
494+
},
495+
})
496+
})
497+
498+
it('called after item resize', async () => {
499+
const item = wrapper.findAllComponents(Item).at(0).vm
500+
item.resized = jest.fn()
501+
updateSizes(12)
502+
expect(item.resized).toBeCalledTimes(1)
503+
})
504+
})
505+
492506
it('gets item height from dom', () => {
493507
const wrapper = mount(ListScroller, {
494508
propsData: {

0 commit comments

Comments
 (0)