import type { TableInstance } from 'element-plus';
|
import { onActivated, ref, type Ref } from 'vue';
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
// 其他特殊滚动项
|
// type ExtItemContainer = TableInstance;
|
export const enum ExtItemType {
|
ElTable,
|
}
|
export const enum ScrollType {
|
X,
|
Y,
|
All,
|
}
|
|
type ExtItem = { container: any; type: ExtItemType };
|
export type ScrollKind = Ref<HTMLElement> | string | ExtItem;
|
type ScrollItem = { item: ScrollKind; scrollType: ScrollType } | ScrollKind;
|
type ScrollTarget = Array<ScrollItem> | ScrollItem;
|
|
type DomItem = { dom: HTMLElement; scrollType: ScrollType; scrollKind: ScrollKind };
|
/** @description 判断 ExtItemType 类型 */
|
function isExtItemType(param: any): param is ExtItem {
|
return !!param?.type || param?.type === 0;
|
}
|
|
/** @description 判断 ExtItemType 类型 */
|
function isHtmlElement(param: any): param is Ref<HTMLElement> {
|
return !!param?.value;
|
}
|
|
function isScrollKind(param: any): param is ScrollKind {
|
return typeof param.scrollType === 'undefined';
|
}
|
|
const getDomList = (target: ScrollItem[]): DomItem[] => {
|
const domList = target.map((item) => {
|
let scrollItem: ScrollKind;
|
let scrollType: ScrollType;
|
if (isScrollKind(item)) {
|
scrollItem = item;
|
// 取默认值 All
|
scrollType = ScrollType.All;
|
} else {
|
scrollItem = item.item;
|
scrollType = item.scrollType;
|
}
|
let dom: HTMLElement;
|
if (typeof scrollItem === 'string') {
|
dom = document.querySelector(scrollItem);
|
} else {
|
if (isExtItemType(scrollItem)) {
|
switch (scrollItem.type) {
|
case ExtItemType.ElTable:
|
dom = scrollItem.container.value.$el.querySelector('.el-scrollbar__wrap');
|
break;
|
default:
|
dom = null;
|
break;
|
}
|
} else if (isHtmlElement(scrollItem)) {
|
dom = scrollItem.value;
|
} else {
|
dom = null;
|
}
|
}
|
|
return {
|
dom,
|
scrollType: scrollType,
|
scrollKind: scrollItem,
|
};
|
});
|
return domList;
|
};
|
|
const extFixLayout = (domItem: DomItem) => {
|
const kind = domItem.scrollKind as any;
|
if (!kind.type) return;
|
switch (kind.type) {
|
case ExtItemType.ElTable:
|
const tableInstanceRef = kind.container as Ref<TableInstance>;
|
// tableInstanceRef.value.doLayout();
|
break;
|
}
|
};
|
export const useSaveScroll = (target: ScrollTarget) => {
|
const targetArr = Array.isArray(target) ? target : [target];
|
|
const savedScroll = ref<
|
{
|
top: number;
|
left: number;
|
}[]
|
>(
|
Array(targetArr.length).fill({
|
top: null,
|
left: null,
|
})
|
);
|
onBeforeRouteLeave((to, from, next) => {
|
const domList = getDomList(targetArr);
|
domList.map((item, index) => {
|
switch (item.scrollType) {
|
case ScrollType.X:
|
savedScroll.value[index].left = item.dom?.scrollLeft ?? 0;
|
break;
|
case ScrollType.Y:
|
savedScroll.value[index].top = item.dom?.scrollTop ?? 0;
|
break;
|
|
case ScrollType.All:
|
savedScroll.value[index].left = item.dom?.scrollLeft ?? 0;
|
savedScroll.value[index].top = item.dom?.scrollTop ?? 0;
|
|
break;
|
}
|
});
|
next();
|
});
|
|
onActivated(() => {
|
const domList = getDomList(targetArr);
|
domList.map((item, index) => {
|
if (item.dom) {
|
switch (item.scrollType) {
|
case ScrollType.X:
|
item.dom.scrollLeft = savedScroll.value[index].left;
|
|
break;
|
case ScrollType.Y:
|
item.dom.scrollTop = savedScroll.value[index].top;
|
break;
|
|
case ScrollType.All:
|
item.dom.scrollLeft = savedScroll.value[index].left;
|
item.dom.scrollTop = savedScroll.value[index].top;
|
break;
|
}
|
// extFixLayout(item);
|
}
|
});
|
});
|
};
|
