From f370bc12d54fa3095619a727f0b7bc42e879c0ba Mon Sep 17 00:00:00 2001 From: forget skyrim <11513667+forget-skyrim@user.noreply.gitee.com> Date: Tue, 6 Dec 2022 17:22:15 +0000 Subject: [PATCH] =?UTF-8?q?feat(tab):=20add=20horizontalScroll=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=20tab=20=E9=80=89=E9=A1=B9=E5=8D=A1=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=8A=9F=E8=83=BD,=20=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=A7=A6=E6=91=B8=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: forget skyrim <11513667+forget-skyrim@user.noreply.gitee.com> --- package/component/src/component/tab/index.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/package/component/src/component/tab/index.vue b/package/component/src/component/tab/index.vue index 7bca3085..c5df5dad 100644 --- a/package/component/src/component/tab/index.vue +++ b/package/component/src/component/tab/index.vue @@ -265,6 +265,19 @@ const update = () => { } }; +const horizontalScroll = (e: WheelEvent) => { + e.preventDefault() + const navSize = getNavSize(); + const containerSize = navRef.value![`offset${sizeName.value}`]; + const currentOffset = navOffset.value; + const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0; + const direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY + const distance = 50 * (direction > 0 ? 1 : -1) + const newOffset = Math.max(currentOffset + distance, 0) + if ((navSize - currentOffset <= containerSize - scrollNextSize && direction > 0)) return; + navOffset.value = newOffset +} + const renderTabIcon = (attrs: Record) => { const tab = attrs.tabData as TabData; if (typeof tab.icon === "function") { @@ -335,6 +348,7 @@ provide("active", active); >