perf: perf component

This commit is contained in:
vben
2020-11-26 21:19:39 +08:00
parent 19011296ed
commit 73c8e0c158
80 changed files with 529 additions and 631 deletions

View File

@@ -1 +1,6 @@
export { default as VirtualScroll } from './src/index';
import VirtualScroll from './src/index';
import { withInstall } from '../util';
export { VirtualScroll };
export default withInstall(VirtualScroll);

View File

@@ -1,4 +1,14 @@
import { defineComponent, computed, ref, unref, reactive, onMounted, watch, nextTick } from 'vue';
import {
defineComponent,
computed,
ref,
unref,
reactive,
onMounted,
watch,
nextTick,
CSSProperties,
} from 'vue';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { convertToUnit } from '/@/components/util';
@@ -34,29 +44,33 @@ export default defineComponent({
return Math.min((props.items || []).length, state.last + unref(getBenchRef));
});
const getContainerStyleRef = computed(() => {
return {
height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
};
});
const getContainerStyleRef = computed(
(): CSSProperties => {
return {
height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
};
}
);
const getWrapStyleRef = computed((): object => {
const styles: Record<string, string> = {};
const height = convertToUnit(props.height);
const minHeight = convertToUnit(props.minHeight);
const minWidth = convertToUnit(props.minWidth);
const maxHeight = convertToUnit(props.maxHeight);
const maxWidth = convertToUnit(props.maxWidth);
const width = convertToUnit(props.width);
const getWrapStyleRef = computed(
(): CSSProperties => {
const styles: Record<string, string> = {};
const height = convertToUnit(props.height);
const minHeight = convertToUnit(props.minHeight);
const minWidth = convertToUnit(props.minWidth);
const maxHeight = convertToUnit(props.maxHeight);
const maxWidth = convertToUnit(props.maxWidth);
const width = convertToUnit(props.width);
if (height) styles.height = height;
if (minHeight) styles.minHeight = minHeight;
if (minWidth) styles.minWidth = minWidth;
if (maxHeight) styles.maxHeight = maxHeight;
if (maxWidth) styles.maxWidth = maxWidth;
if (width) styles.width = width;
return styles;
});
if (height) styles.height = height;
if (minHeight) styles.minHeight = minHeight;
if (minWidth) styles.minWidth = minWidth;
if (maxHeight) styles.maxHeight = maxHeight;
if (maxWidth) styles.maxWidth = maxWidth;
if (width) styles.width = width;
return styles;
}
);
watch([() => props.itemHeight, () => props.height], () => {
onScroll();