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 auto overflow error for addIcon

pull/5419/head
tangjinzhou 2022-03-29 12:56:42 +08:00
parent 80342f40b3
commit 669b22a54b
2 changed files with 11 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/tabs/src/TabNavList/index.tsx
View File

@ -70,7 +70,7 @@ export default defineComponent({
const tabsWrapperRef = ref<HTMLDivElement>();
const tabListRef = ref<HTMLDivElement>();
const operationsRef = ref<{ $el: HTMLDivElement }>();
const innerAddButtonRef = ref<HTMLButtonElement>();
const innerAddButtonRef = ref();
const [setRef, btnRefs] = useRefs();
const tabPositionTopOrBottom = computed(
() => props.tabPosition === 'top' || props.tabPosition === 'bottom',
@ -89,8 +89,6 @@ export default defineComponent({
const [wrapperScrollWidth, setWrapperScrollWidth] = useState<number>(0);
const [wrapperScrollHeight, setWrapperScrollHeight] = useState<number>(0);
const [wrapperContentWidth, setWrapperContentWidth] = useState<number>(0);
const [wrapperContentHeight, setWrapperContentHeight] = useState<number>(0);
const [wrapperWidth, setWrapperWidth] = useState<number>(null);
const [wrapperHeight, setWrapperHeight] = useState<number>(null);
const [addWidth, setAddWidth] = useState<number>(0);
@ -232,25 +230,24 @@ export default defineComponent({
let basicSize: number;
let tabContentSize: number;
let addSize: number;
const tabOffsetsValue = tabOffsets.value;
if (['top', 'bottom'].includes(props.tabPosition)) {
unit = 'width';
basicSize = wrapperWidth.value;
tabContentSize = wrapperContentWidth.value;
tabContentSize = wrapperScrollWidth.value;
addSize = addWidth.value;
position = props.rtl ? 'right' : 'left';
transformSize = Math.abs(transformLeft.value);
} else {
unit = 'height';
basicSize = wrapperHeight.value;
tabContentSize = wrapperContentHeight.value;
tabContentSize = wrapperScrollWidth.value;
addSize = addHeight.value;
position = 'top';
transformSize = -transformTop.value;
}
let mergedBasicSize = basicSize;
if (tabContentSize + addSize > basicSize) {
if (tabContentSize + addSize > basicSize && tabContentSize < basicSize) {
mergedBasicSize = basicSize - addSize;
}
@ -262,7 +259,7 @@ export default defineComponent({
const len = tabsVal.length;
let endIndex = len;
for (let i = 0; i < len; i += 1) {
const offset = tabOffsets.value.get(tabsVal[i].key) || DEFAULT_SIZE;
const offset = tabOffsetsValue.get(tabsVal[i].key) || DEFAULT_SIZE;
if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
endIndex = i - 1;
break;
@ -270,7 +267,7 @@ export default defineComponent({
}
let startIndex = 0;
for (let i = len - 1; i >= 0; i -= 1) {
const offset = tabOffsets.value.get(tabsVal[i].key) || DEFAULT_SIZE;
const offset = tabOffsetsValue.get(tabsVal[i].key) || DEFAULT_SIZE;
if (offset[position] < transformSize) {
startIndex = i + 1;
break;
@ -284,11 +281,9 @@ export default defineComponent({
// Update wrapper records
const offsetWidth = tabsWrapperRef.value?.offsetWidth || 0;
const offsetHeight = tabsWrapperRef.value?.offsetHeight || 0;
const newAddWidth = innerAddButtonRef.value?.offsetWidth || 0;
const newAddHeight = innerAddButtonRef.value?.offsetHeight || 0;
const newOperationWidth = operationsRef.value?.$el.offsetWidth || 0;
const newOperationHeight = operationsRef.value?.$el.offsetHeight || 0;
const addDom = innerAddButtonRef.value?.$el || {};
const newAddWidth = addDom.offsetWidth || 0;
const newAddHeight = addDom.offsetHeight || 0;
setWrapperWidth(offsetWidth);
setWrapperHeight(offsetHeight);
setAddWidth(newAddWidth);
@ -300,14 +295,6 @@ export default defineComponent({
setWrapperScrollWidth(newWrapperScrollWidth);
setWrapperScrollHeight(newWrapperScrollHeight);
const isOperationHidden = operationsRef.value?.$el.className.includes(
operationsHiddenClassName.value,
);
setWrapperContentWidth(newWrapperScrollWidth - (isOperationHidden ? 0 : newOperationWidth));
setWrapperContentHeight(
newWrapperScrollHeight - (isOperationHidden ? 0 : newOperationHeight),
);
// Update buttons records
setTabSizes(() => {
const newSizes: TabSizeMap = new Map();
@ -475,7 +462,6 @@ export default defineComponent({
});
return (
<div
ref={ref}
role="tablist"
class={classNames(`${pre}-nav`, className)}
style={style}

2
components/tabs/src/index.ts
View File

@ -1,4 +1,4 @@
// base rc-tabs 11.10.1
// base rc-tabs 11.12.0
import Tabs from './Tabs';
import type { TabsProps } from './Tabs';
import TabPane from './TabPanelList/TabPane';