fix: 选项卡渲染问题,以及完善路由中affix=true时处理逻辑

pull/38/head
xingyu 2023-10-11 09:36:22 +08:00
parent bdb7fdc3a3
commit 8d280af271
2 changed files with 9 additions and 4 deletions

View File

@ -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>

View File

@ -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