From f2810366ae5d591888c65801affc40c83f618a2e Mon Sep 17 00:00:00 2001 From: James-9696 Date: Fri, 27 Dec 2024 00:36:02 -0800 Subject: [PATCH] fix(tabs): modify the issue of the mobile demo not displaying and reporting errors --- .../components/tabs/src/renderless/index.ts | 18 +++++++++--------- .../components/tabs/src/renderless/vue.ts | 12 ++++++------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/mobile/components/tabs/src/renderless/index.ts b/packages/mobile/components/tabs/src/renderless/index.ts index 8f649ca8a8..f5d1467b1a 100644 --- a/packages/mobile/components/tabs/src/renderless/index.ts +++ b/packages/mobile/components/tabs/src/renderless/index.ts @@ -14,12 +14,12 @@ import type { ITabsRenderlessParams, ITabsPane, ITabsCustomEvent, ITabsPaneVm } export const calcPaneInstances = ({ constants, - parent, + vm, state, childrenHandler - }: Pick) => + }: Pick) => (isForceUpdate = false) => { - const tabItemVNodes = parent.$slots.default + const tabItemVNodes = vm.$slots.default /* istanbul ignore if */ if (tabItemVNodes) { @@ -62,13 +62,13 @@ export const calcPaneInstances = /* istanbul ignore */ export const calcMorePanes = - ({ parent, props, state, refs }: Pick) => + ({ vm, props, state, refs }: Pick) => () => { if (!props.showMoreTabs) { return } - const el = parent.$el + const el = vm.$el const tabs = el.querySelectorAll('.tiny-tabs__item') const tabNavRefs = refs.nav.$refs @@ -93,12 +93,12 @@ export const calcMorePanes = } export const calcExpandPanes = - ({ parent, props, state }: Pick) => + ({ vm, props, state }: Pick) => () => { if (!props.showExpandTabs) { return } - const el = parent.$el + const el = vm.$el const tabsHeader = el.querySelector('.tiny-mobile-tabs__header') if (tabsHeader) { @@ -185,11 +185,11 @@ export const changeCurrentName = } export const created = - ({ api, parent, state }: Pick) => + ({ api, vm, state }: Pick) => () => { api.changeDirection(state.currentName) - parent.$on('tab-nav-update', api.calcPaneInstances.bind(null, true)) + vm.$on('tab-nav-update', api.calcPaneInstances.bind(null, true)) } export const changeDirection = diff --git a/packages/mobile/components/tabs/src/renderless/vue.ts b/packages/mobile/components/tabs/src/renderless/vue.ts index bfaade8fec..0a15d34161 100644 --- a/packages/mobile/components/tabs/src/renderless/vue.ts +++ b/packages/mobile/components/tabs/src/renderless/vue.ts @@ -102,7 +102,7 @@ const initWatcher = ({ export const renderless = ( props: ITabsProps, { onMounted, onUpdated, provide, reactive, watch }: ISharedRenderlessParamHooks, - { refs, parent, emit, constants, nextTick, childrenHandler }: ITabsRenderlessParamUtils + { refs, parent, vm, emit, constants, nextTick, childrenHandler }: ITabsRenderlessParamUtils ): ITabsApi => { const api = {} as ITabsApi const state: ITabsState = initState({ reactive, props }) @@ -113,20 +113,20 @@ export const renderless = ( handleTabRemove: handleTabRemove({ emit, props }), changeDirection: changeDirection({ props, state }), changeCurrentName: changeCurrentName({ emit, state }), - calcMorePanes: calcMorePanes({ parent, props, state, refs }), - calcExpandPanes: calcExpandPanes({ parent, props, state }), - calcPaneInstances: calcPaneInstances({ constants, parent, state, childrenHandler }), + calcMorePanes: calcMorePanes({ vm, props, state, refs }), + calcExpandPanes: calcExpandPanes({ vm, props, state }), + calcPaneInstances: calcPaneInstances({ constants, vm, state, childrenHandler }), handleTabDragStart: handleTabDragStart({ emit }), handleTabDragOver: handleTabDragOver({ emit }), handleTabDragEnd: handleTabDragEnd({ state, emit }), handleTabClick: handleTabClick({ api, emit, props, refs }), setCurrentName: setCurrentName({ api, props, refs, state }), - created: created({ api, parent, state }) + created: created({ api, vm, state }) }) api.created() - provide('rootTabs', parent) + provide('rootTabs', vm) provide('separator', state.separator)