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