diff --git a/packages/renderless/src/tabs-mf/vue.ts b/packages/renderless/src/tabs-mf/vue.ts index e22d48eb77..99d4717df9 100644 --- a/packages/renderless/src/tabs-mf/vue.ts +++ b/packages/renderless/src/tabs-mf/vue.ts @@ -91,12 +91,32 @@ export const renderless = (props, hooks, { vm, emit, nextTick }) => { (name) => name && api.setActive(name) ) + // 监听 cacheCurrentItem 变化,确保 currentItem 及时更新 + watch( + () => state.cacheCurrentItem, + (newItem) => { + if (newItem && newItem !== state.currentItem) { + state.currentItem = newItem + } + }, + { immediate: true } + ) + onMounted(() => { // 在 vue2 类似 tabSwipe0 这些动态的 ref 只能在 nextTick 中拿到 - nextTick(() => api.observeTabSwipeSize()) - state.currentItem = state.cacheCurrentItem - props.activeName && api.scrollTo(props.activeName) - props.modelValue && api.scrollTo(props.modelValue) + nextTick(() => { + api.observeTabSwipeSize() + // 确保 currentItem 已设置,如果还没有则使用 cacheCurrentItem + if (!state.currentItem && state.cacheCurrentItem) { + state.currentItem = state.cacheCurrentItem + } + // 如果没有 activeName 或 modelValue,且没有选中的 item,则设置第一个 item 为选中 + if (!props.activeName && !props.modelValue && state.items.length > 0 && !state.cacheCurrentItem) { + api.changeCurrentName(state.items[0].name) + } + props.activeName && api.scrollTo(props.activeName) + props.modelValue && api.scrollTo(props.modelValue) + }) }) onBeforeUnmount(() => {