Browse Source
perf: optimization of tabbar display (#4169)
perf: optimization of tabbar display (#4169)
* perf: optimization of tabbar display * fix: ci error * chore: typo * chore: typopull/4171/head
Vben
1 month ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
38 changed files with 715 additions and 509 deletions
-
4apps/web-antd/package.json
-
4apps/web-ele/package.json
-
4apps/web-naive/package.json
-
2docs/package.json
-
3internal/lint-configs/eslint-config/src/configs/typescript.ts
-
2package.json
-
4packages/@core/base/icons/package.json
-
2packages/@core/base/shared/package.json
-
2packages/@core/base/typings/package.json
-
35packages/@core/base/typings/src/helper.d.ts
-
4packages/@core/composables/package.json
-
18packages/@core/composables/src/use-content-style.ts
-
2packages/@core/composables/src/use-sortable.test.ts
-
2packages/@core/composables/src/use-sortable.ts
-
4packages/@core/preferences/package.json
-
4packages/@core/ui-kit/layout-ui/package.json
-
4packages/@core/ui-kit/menu-ui/package.json
-
6packages/@core/ui-kit/shadcn-ui/package.json
-
76packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
-
3packages/@core/ui-kit/tabs-ui/package.json
-
264packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
-
162packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
-
170packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
-
13packages/@core/ui-kit/tabs-ui/src/types.ts
-
110packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
-
160packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
-
2packages/effects/access/package.json
-
4packages/effects/chart-ui/package.json
-
4packages/effects/common-ui/package.json
-
2packages/effects/hooks/package.json
-
4packages/effects/layouts/package.json
-
2packages/locales/package.json
-
2packages/stores/package.json
-
17packages/stores/src/modules/tabbar.ts
-
2packages/types/package.json
-
4playground/package.json
-
2playground/src/router/routes/modules/demos.ts
-
115pnpm-lock.yaml
@ -0,0 +1,110 @@ |
|||
import type { EmitType } from '@vben-core/typings'; |
|||
|
|||
import type { TabsProps } from './types'; |
|||
|
|||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'; |
|||
|
|||
import { type Sortable, useSortable } from '@vben-core/composables'; |
|||
|
|||
// 可能会找到拖拽的子元素，这里需要确保拖拽的dom时tab元素
|
|||
function findParentElement(element: HTMLElement) { |
|||
const parentCls = 'group'; |
|||
return element.classList.contains(parentCls) |
|||
? element |
|||
: element.closest(`.${parentCls}`); |
|||
} |
|||
|
|||
export function useTabsDrag(props: TabsProps, emit: EmitType) { |
|||
const sortableInstance = ref<null | Sortable>(null); |
|||
|
|||
async function initTabsSortable() { |
|||
await nextTick(); |
|||
|
|||
const el = document.querySelectorAll( |
|||
`.${props.contentClass}`, |
|||
)?.[0] as HTMLElement; |
|||
|
|||
if (!el) { |
|||
console.warn('Element not found for sortable initialization'); |
|||
return; |
|||
} |
|||
|
|||
const resetElState = async () => { |
|||
el.style.cursor = 'default'; |
|||
el.classList.remove('dragging'); |
|||
el.querySelector('.draggable')?.classList.remove('dragging'); |
|||
}; |
|||
|
|||
const { initializeSortable } = useSortable(el, { |
|||
filter: (_evt, target: HTMLElement) => { |
|||
const parent = findParentElement(target); |
|||
const dragable = parent?.classList.contains('dragable'); |
|||
return !dragable || !props.dragable; |
|||
}, |
|||
onEnd(evt) { |
|||
const { newIndex, oldIndex } = evt; |
|||
// const fromElement = evt.item;
|
|||
const { srcElement } = (evt as any).originalEvent; |
|||
|
|||
if (!srcElement) { |
|||
resetElState(); |
|||
return; |
|||
} |
|||
|
|||
const srcParent = findParentElement(srcElement); |
|||
|
|||
if (!srcParent) { |
|||
resetElState(); |
|||
return; |
|||
} |
|||
|
|||
if (!srcParent.classList.contains('dragable')) { |
|||
resetElState(); |
|||
|
|||
return; |
|||
} |
|||
|
|||
if ( |
|||
oldIndex !== undefined && |
|||
newIndex !== undefined && |
|||
!Number.isNaN(oldIndex) && |
|||
!Number.isNaN(newIndex) && |
|||
oldIndex !== newIndex |
|||
) { |
|||
emit('sortTabs', oldIndex, newIndex); |
|||
} |
|||
resetElState(); |
|||
}, |
|||
onMove(evt) { |
|||
const parent = findParentElement(evt.related); |
|||
return parent?.classList.contains('dragable') && props.dragable; |
|||
}, |
|||
onStart: () => { |
|||
el.style.cursor = 'grabbing'; |
|||
el.querySelector('.draggable')?.classList.add('dragging'); |
|||
// el.classList.add('dragging');
|
|||
}, |
|||
}); |
|||
|
|||
sortableInstance.value = await initializeSortable(); |
|||
} |
|||
|
|||
async function init() { |
|||
await nextTick(); |
|||
initTabsSortable(); |
|||
} |
|||
|
|||
onMounted(init); |
|||
|
|||
watch( |
|||
() => props.styleType, |
|||
() => { |
|||
sortableInstance.value?.destroy(); |
|||
init(); |
|||
}, |
|||
); |
|||
|
|||
onUnmounted(() => { |
|||
sortableInstance.value?.destroy(); |
|||
}); |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue