github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: tabs not update, close #5056

doc-form
tangjinzhou 2021-12-20 16:18:48 +08:00
parent 5cc1bd715d
commit 02e6fecc6d
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/tabs/src/Tabs.tsx
View File

@ -11,7 +11,7 @@ import type {
Tab, Tab,
} from './interface'; } from './interface';
import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
import { defineComponent, computed, onMounted, watchEffect, camelize } from 'vue'; import { ref, defineComponent, computed, onMounted, watchEffect, camelize } from 'vue';
import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util'; import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util';
import useConfigInject from '../../_util/hooks/useConfigInject'; import useConfigInject from '../../_util/hooks/useConfigInject';
import useState from '../../_util/hooks/useState'; import useState from '../../_util/hooks/useState';
@ -181,19 +181,24 @@ const InternalTabs = defineComponent({
}); });
// ====================== Active Key ====================== // ====================== Active Key ======================
const [mergedActiveKey, setMergedActiveKey] = useMergedState<Key>(() => props.tabs[0]?.key, { // use activeKey & mergedActiveKey to control
// https://github.com/vueComponent/ant-design-vue/issues/5056
const [activeKey] = useMergedState<Key>(() => props.tabs[0]?.key, {
value: computed(() => props.activeKey), value: computed(() => props.activeKey),
defaultValue: props.defaultActiveKey, defaultValue: props.defaultActiveKey,
}); });
const mergedActiveKey = ref<Key>();
const [activeIndex, setActiveIndex] = useState(() => const [activeIndex, setActiveIndex] = useState(() =>
props.tabs.findIndex(tab => tab.key === mergedActiveKey.value), props.tabs.findIndex(tab => tab.key === mergedActiveKey.value),
); );
watchEffect(() => { watchEffect(() => {
let newActiveIndex = props.tabs.findIndex(tab => tab.key === mergedActiveKey.value); let newActiveIndex = props.tabs.findIndex(tab => tab.key === activeKey.value);
if (newActiveIndex === -1) { if (newActiveIndex === -1) {
newActiveIndex = Math.max(0, Math.min(activeIndex.value, props.tabs.length - 1)); newActiveIndex = Math.max(0, Math.min(activeIndex.value, props.tabs.length - 1));
mergedActiveKey.value = props.tabs[newActiveIndex]?.key; mergedActiveKey.value = props.tabs[newActiveIndex]?.key;
} else {
mergedActiveKey.value = activeKey.value;
} }
setActiveIndex(newActiveIndex); setActiveIndex(newActiveIndex);
}); });
@ -221,9 +226,11 @@ const InternalTabs = defineComponent({
// ======================== Events ======================== // ======================== Events ========================
const onInternalTabClick = (key: Key, e: MouseEvent | KeyboardEvent) => { const onInternalTabClick = (key: Key, e: MouseEvent | KeyboardEvent) => {
props.onTabClick?.(key, e); props.onTabClick?.(key, e);
const isActiveChanged = key !== mergedActiveKey.value;
setMergedActiveKey(key); if (isActiveChanged) {
props.onChange?.(key); mergedActiveKey.value = key;
props.onChange?.(key);
}
}; };
useProvideTabs({ useProvideTabs({