mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 06:23:23 +08:00
fix: 修复激活标签页定位可能不居中的问题
This commit is contained in:
@@ -30,10 +30,20 @@ const tabRef = useTemplateRef<HTMLElement[]>('tabRef')
|
||||
|
||||
watch(() => route, (val) => {
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
tabbarStore.add(val).then(() => {
|
||||
tabbarStore.add(val)
|
||||
nextTick(() => {
|
||||
const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
|
||||
if (index !== -1) {
|
||||
tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
|
||||
const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
|
||||
const containerEl = tabsRef.value?.ref?.$el
|
||||
if (tabEl && containerEl) {
|
||||
const tabLeft = tabEl.offsetLeft
|
||||
const tabWidth = tabEl.offsetWidth
|
||||
const containerWidth = containerEl.clientWidth
|
||||
// 计算滚动位置,使标签页居中
|
||||
const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2
|
||||
tabsRef.value?.scrollTo(scrollLeft)
|
||||
}
|
||||
tabbarScrollTip()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -12,7 +12,7 @@ const useTabbarStore = defineStore(
|
||||
const leaveIndex = ref(-1)
|
||||
|
||||
// 添加标签页
|
||||
async function add(route: RouteLocationNormalized) {
|
||||
function add(route: RouteLocationNormalized) {
|
||||
const names: string[] = []
|
||||
route.matched.forEach((v, i) => {
|
||||
if (i > 0) {
|
||||
|
||||
Reference in New Issue
Block a user