diff --git a/src/tabs/_example/combination.vue b/src/tabs/_example/combination.vue index 053b9ee61d..6e8f921eda 100644 --- a/src/tabs/_example/combination.vue +++ b/src/tabs/_example/combination.vue @@ -7,7 +7,7 @@ - +

选项卡{{ index + 1 }}

 @@ -17,6 +17,6 @@ diff --git a/src/tabs/tab-nav.tsx b/src/tabs/tab-nav.tsx index b662a53913..88a373a6a6 100644 --- a/src/tabs/tab-nav.tsx +++ b/src/tabs/tab-nav.tsx @@ -46,7 +46,7 @@ export default defineComponent({ onDragSort: tabProps.onDragSort, }, setup(props) { - const COMPONENT_NAME = usePrefixClass('tabs'); + const componentName = usePrefixClass('tabs'); const { ChevronLeftIcon, ChevronRightIcon, AddIcon } = useGlobalIcon({ ChevronLeftIcon: TdChevronLeftIcon, ChevronRightIcon: TdChevronRightIcon, @@ -69,6 +69,7 @@ export default defineComponent({ const rightOperationsRef = ref(); const toRightBtnRef = ref(); const activeTabRef = ref(); + const getRefs = () => ({ navsContainer: navsContainerRef.value, navsWrap: navsWrapRef.value, @@ -95,47 +96,47 @@ export default defineComponent({ // class const iconBaseClass = computed(() => { return { - [`${COMPONENT_NAME.value}__btn`]: true, + [`${componentName.value}__btn`]: true, [SIZE.value.medium]: props.size === 'medium', [SIZE.value.large]: props.size === 'large', }; }); const leftIconClass = computed(() => { return { - [`${COMPONENT_NAME.value}__btn--left`]: true, + [`${componentName.value}__btn--left`]: true, ...iconBaseClass.value, }; }); const rightIconClass = computed(() => { return { - [`${COMPONENT_NAME.value}__btn--right`]: true, + [`${componentName.value}__btn--right`]: true, ...iconBaseClass.value, }; }); const addIconClass = computed(() => { return { - [`${COMPONENT_NAME.value}__add-btn`]: true, + [`${componentName.value}__add-btn`]: true, ...iconBaseClass.value, }; }); const navContainerClass = computed(() => { return { - [`${COMPONENT_NAME.value}__nav-container`]: true, - [`${COMPONENT_NAME.value}__nav--card`]: props.theme === 'card', + [`${componentName.value}__nav-container`]: true, + [`${componentName.value}__nav--card`]: props.theme === 'card', [`${classPrefix.value}-is-${props.placement}`]: true, [`${classPrefix.value}-is-addable`]: props.addable, }; }); const navScrollContainerClass = computed(() => { return { - [`${COMPONENT_NAME.value}__nav-scroll`]: true, + [`${componentName.value}__nav-scroll`]: true, [`${classPrefix.value}-is-scrollable`]: canToLeft.value || canToRight.value, }; }); const navsWrapClass = computed(() => { return [ - `${COMPONENT_NAME.value}__nav-wrap`, + `${componentName.value}__nav-wrap`, `${classPrefix.value}-is-smooth`, { [`${classPrefix.value}-is-vertical`]: isVerticalPlacement.value }, ]; @@ -152,9 +153,10 @@ export default defineComponent({ // life times useResize(debounce(totalAdjust), navsContainerRef.value); + onMounted(() => { - totalAdjust(); calculateMountedScrollLeft(); + totalAdjust(); }); // calculate scroll left after mounted @@ -163,10 +165,18 @@ export default defineComponent({ const container = navsContainerRef.value; const activeTabEl = activeTabRef.value; + const activeTabWidth = activeTabEl?.offsetWidth || 0; + const containerWidth = container?.offsetWidth || 0; + + const activeElIndex = Array.prototype.indexOf.call(navsWrapRef.value.children, activeTabEl); // index of the active tab + + const isRightBtnShow = + navs.value.length - activeElIndex >= Math.round((containerWidth - activeTabWidth) / activeTabWidth) ? 1 : 0; // calculate whether the right btn is display or not const totalWidthBeforeActiveTab = activeTabEl?.offsetLeft; - const containerWidth = container.offsetWidth || 0; - if (totalWidthBeforeActiveTab > containerWidth) scrollLeft.value = totalWidthBeforeActiveTab; + if (totalWidthBeforeActiveTab > containerWidth - activeTabWidth) + scrollLeft.value = totalWidthBeforeActiveTab - isRightBtnShow * activeTabWidth; }; + // methods const adjustScrollLeft = () => { scrollLeft.value = calcScrollLeft(getRefs(), scrollLeft.value); @@ -256,7 +266,7 @@ export default defineComponent({ return [
{canToLeft.value ? ( @@ -268,7 +278,7 @@ export default defineComponent({
,
{canToRight.value ? ( @@ -303,7 +313,7 @@ export default defineComponent({ return () => { return ( -
+
{renderArrows()} {renderNavs()}
diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index f457ef5015..d4057a4dcc 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/test/unit/snap/__snapshots__/csr.test.js.snap @@ -164349,6 +164349,36 @@ exports[`csr snapshot test > csr test ./src/tabs/_example/combination.vue 1`] =
+
+
+ + 选项卡20 + +
+ +
+
+
+ + 选项卡21 + +
+ +
csr test ./src/tabs/_example/combination.vue 1`] = - 选项卡20 + 选项卡22 + +
+ + +
+
+ + 选项卡23 + +
+ +
+
+
+ + 选项卡24 + +
+ +
+
+
+ + 选项卡25 + +
+ +
+
+
+ + 选项卡26 + +
+ +
+
+
+ + 选项卡27 + +
+ +
+
+
+ + 选项卡28 + +
+ +
+
+
+ + 选项卡29 + +
+ +
+
+
+ + 选项卡30
@@ -164393,6 +164543,8 @@ exports[`csr snapshot test > csr test ./src/tabs/_example/combination.vue 1`] = + +
@@ -164400,10 +164552,18 @@ exports[`csr snapshot test > csr test ./src/tabs/_example/combination.vue 1`] =

- 选项卡21 + 选项卡23

+ + + + + + + +
diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index 3267098837..7729f38c9a 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -1164,7 +1164,7 @@ exports[`ssr snapshot test > ssr test ./src/tabs/_example/ban.vue 1`] = `"
ssr test ./src/tabs/_example/base.vue 1`] = `"
选项卡1
选项卡2
选项卡3

选项卡1的内容，使用 t-tab-panel 渲染

选项卡2的内容，使用 t-tab-panel 渲染

选项卡一
选项卡二
选项卡三

这是选项卡一的内容，使用 t-tabs 渲染

"`; -exports[`ssr snapshot test > ssr test ./src/tabs/_example/combination.vue 1`] = `"
选项卡1
选项卡2
选项卡3
选项卡4
选项卡5
选项卡6
选项卡7
选项卡8
选项卡9
选项卡10
选项卡11
选项卡12
选项卡13
选项卡14
选项卡15
选项卡16
选项卡17
选项卡18
选项卡19
选项卡20

选项卡21

"`; +exports[`ssr snapshot test > ssr test ./src/tabs/_example/combination.vue 1`] = `"
选项卡1
选项卡2
选项卡3
选项卡4
选项卡5
选项卡6
选项卡7
选项卡8
选项卡9
选项卡10
选项卡11
选项卡12
选项卡13
选项卡14
选项卡15
选项卡16
选项卡17
选项卡18
选项卡19
选项卡20
选项卡21
选项卡22
选项卡23
选项卡24
选项卡25
选项卡26
选项卡27
选项卡28
选项卡29
选项卡30

选项卡23

"`; exports[`ssr snapshot test > ssr test ./src/tabs/_example/custom.vue 1`] = `"
原有选项卡1
原有选项卡2

原有选项卡1内容

"`;