Refactor on VirtualScroller
parent
5243d5ba00
commit
efc8b36523
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<template v-if="!disabled">
|
||||
<div :ref="elementRef" :class="containerClass" :style="style" @scroll="onScroll">
|
||||
<slot name="content" styleClass="p-virtualscroller-content" :contentRef="contentRef" :items="loadedItems" :getItemOptions="getOptions">
|
||||
<div :ref="contentRef" class="p-virtualscroller-content">
|
||||
<template v-for="(item, index) of loadedItems" :key="index">
|
||||
<slot name="item" :item="item" :options="getOptions(index)"></slot>
|
||||
</template>
|
||||
</div>
|
||||
</slot>
|
||||
<div :ref="spacerRef" class="p-virtualscroller-spacer"></div>
|
||||
<div :class="loaderClass" v-if="d_loading">
|
||||
<template v-for="(loadItem, index) of loaderArr" :key="index">
|
||||
|
@ -15,13 +18,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot></slot>
|
||||
<slot name="content"></slot>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VirtualScroller',
|
||||
emits: ['update:numToleratedItems', 'scroll-index-change', 'lazy-load'],
|
||||
props: {
|
||||
items: null,
|
||||
items: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
itemSize: {
|
||||
type: [Number,Array],
|
||||
default: null
|
||||
|
@ -53,7 +64,11 @@ export default {
|
|||
default: false
|
||||
},
|
||||
style: null,
|
||||
class: null
|
||||
class: null,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -71,9 +86,7 @@ export default {
|
|||
spacer: null,
|
||||
scrollTimeout: null,
|
||||
mounted() {
|
||||
this.$nextTick(function () {
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
numToleratedItems(newValue) {
|
||||
|
@ -81,13 +94,18 @@ export default {
|
|||
},
|
||||
loading(newValue) {
|
||||
this.d_loading = newValue;
|
||||
},
|
||||
items() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.disabled) {
|
||||
this.setSize();
|
||||
this.calculateOptions();
|
||||
this.setSpacerSize();
|
||||
}
|
||||
},
|
||||
getLast(last, isCols) {
|
||||
return this.items ? Math.min((isCols ? this.items[0].length : this.items.length), last) : 0;
|
||||
|
|
Loading…
Reference in New Issue