@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
68 lines (65 loc) • 2.15 kB
JavaScript
import { ref, nextTick } from 'vue';
function useVirtualized() {
const actualHeightContainerEl = ref(null);
const translateContainerEl = ref(null);
const scrollContainerEl = ref(null);
const isMultiple = ref(false);
const saveDATA = ref([]);
const RenderedItemsCache = {};
const getDom = (props) => {
const getElements = (className) => {
actualHeightContainerEl.value = document.querySelector(`${className} .el-scrollbar__view`);
translateContainerEl.value = document.querySelector(`${className} .el-table__body`);
scrollContainerEl.value = document.querySelector(`${className} .el-scrollbar__wrap`);
};
isMultiple.value = props.multiple;
if (props.multiple) {
getElements(".fm_select_table_multiple");
} else {
getElements(".fm_select_table_radio");
}
};
const getItemHeightFromCache = (index) => {
const val = RenderedItemsCache[index];
return val === void 0 ? 50 : val;
};
const updateActualHeight = () => {
let actualHeight = 0;
saveDATA.value.forEach((_, i) => {
actualHeight += getItemHeightFromCache(i);
});
actualHeightContainerEl.value.style.height = actualHeight + "px";
};
const updateOffset = (offset) => {
if (translateContainerEl.value && translateContainerEl.value.style) {
translateContainerEl.value.style.transform = `translateY(${offset}px)`;
}
};
const updateRenderedItemCache = (index) => {
const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length;
if (!shouldUpdate) return;
nextTick(() => {
const Items = Array.from(
document.querySelectorAll(
`${isMultiple.value ? `.fm_select_table_multiple` : `.fm_select_table_radio`} .el-table__row`
)
);
Items.forEach((el) => {
if (!RenderedItemsCache[index]) {
RenderedItemsCache[index] = el.offsetHeight;
}
index++;
});
updateActualHeight();
});
};
return {
scrollContainerEl,
updateRenderedItemCache,
updateOffset,
getDom,
getItemHeightFromCache,
saveDATA
};
}
export { useVirtualized };