fix: 选项卡渲染问题,以及完善路由中affix=true时处理逻辑
parent
bdb7fdc3a3
commit
8d280af271
|
@ -12,6 +12,7 @@ import { useFullContent } from '@/hooks/web/useFullContent'
|
|||
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'
|
||||
import { useAppInject } from '@/hooks/web/useAppInject'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useMultipleTabStore } from '@/store/modules/multipleTab'
|
||||
|
||||
defineOptions({ name: 'LayoutMultipleHeader' })
|
||||
|
||||
|
@ -20,6 +21,7 @@ const HEADER_HEIGHT = 48
|
|||
const TABS_HEIGHT = 32
|
||||
|
||||
const { setHeaderHeight } = useLayoutHeight()
|
||||
const tabStore = useMultipleTabStore()
|
||||
const { prefixCls } = useDesign('layout-multiple-header')
|
||||
|
||||
const { getCalcContentWidth, getSplit } = useMenuSetting()
|
||||
|
@ -76,7 +78,7 @@ const getClass = computed(() => {
|
|||
<div v-if="getIsShowPlaceholderDom" :style="getPlaceholderDomStyle" />
|
||||
<div :style="getWrapStyle" :class="getClass">
|
||||
<LayoutHeader v-if="getShowInsetHeaderRef" />
|
||||
<MultipleTabs v-if="getShowTabs" />
|
||||
<MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,12 +1,15 @@
|
|||
import { nextTick, ref, toRaw } from 'vue'
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useSortable } from '@/hooks/web/useSortable'
|
||||
import { useMultipleTabStore } from '@/store/modules/multipleTab'
|
||||
import { isNullAndUnDef } from '@/utils/is'
|
||||
import projectSetting from '@/settings/projectSetting'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
export function initAffixTabs(): string[] {
|
||||
const affixList = ref<RouteLocationNormalized[]>([])
|
||||
|
||||
|
@ -58,11 +61,11 @@ export function useTabsDrag(affixTextList: string[]) {
|
|||
return
|
||||
const el = document.querySelectorAll(`.${prefixCls} .ant-tabs-nav-wrap > div`)?.[0] as HTMLElement
|
||||
const { initSortable } = useSortable(el, {
|
||||
filter: (e: ChangeEvent) => {
|
||||
const text = e?.target?.innerText
|
||||
filter: (_evt, target: HTMLElement) => {
|
||||
const text = target.innerText
|
||||
if (!text)
|
||||
return false
|
||||
return affixTextList.includes(text)
|
||||
return affixTextList.map(res => t(res)).includes(text)
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
const { oldIndex, newIndex } = evt
|
||||
|
|
Loading…
Reference in New Issue