by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: shake when adding tabs

Browse Source
This commit is contained in:
vince
2024-07-16 22:07:28 +08:00
parent 9021e992ad
commit c2c32332d3
16 changed files with 256 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -39,23 +39,6 @@ const style = computed(() => {
};
});
// const layout = () => {
// const { maxWidth, minWidth } = props;
// if (!contentRef.value) {
// return Math.max(maxWidth, minWidth);
// }
// // const contentWidth = contentRef.value.clientWidth - gap * 3;
// // let width = contentWidth / tabs.length;
// // width += gap * 2;
// // if (width > maxWidth) {
// // width = maxWidth;
// // }
// // if (width < minWidth) {
// // width = minWidth;
// // }
// tabWidth.value = maxWidth;
// };
const tabsView = computed((): TabConfig[] => {
return props.tabs.map((tab) => {
return {
@@ -71,23 +54,10 @@ const tabsView = computed((): TabConfig[] => {
});
});
// watch(
// () => props.tabs,
// () => {
// nextTick(() => {
// layout();
// });
// },
// );
watch(active, () => {
scrollIntoView();
});
// onMounted(() => {
// layout();
// });
function handleClose(key: string) {
emit('close', key);
}
@@ -114,9 +84,9 @@ function scrollIntoView() {
<div
ref="contentRef"
:class="contentClass"
class="relative !flex h-[calc(100%-1px)] w-max"
class="relative !flex h-[calc(100%-2px)] w-max"
>
<TransitionGroup name="slide-down">
<TransitionGroup name="slide-up">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"

2
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -85,7 +85,7 @@ function scrollIntoView() {
:class="contentClass"
class="relative !flex h-full w-max items-center"
>
<TransitionGroup name="slide-down">
<TransitionGroup name="slide-up">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"