theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(tab): add horizontalScroll

Browse Source 
添加 tab 选项卡鼠标滚动功能, 兼容移动端触摸事件

Signed-off-by: forget skyrim <11513667+forget-skyrim@user.noreply.gitee.com>
This commit is contained in:
forget skyrim 2022-12-06 17:22:15 +00:00 committed by Gitee
parent bb9f74922e
commit f370bc12d5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package/component/src/component/tab/index.vue
View File

@ -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<string, unknown>) => {
const tab = attrs.tabData as TabData;
if (typeof tab.icon === "function") {
@ -335,6 +348,7 @@ provide("active", active);
>
<ul
ref="navRef"
@wheel="horizontalScroll"
:class="[
'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : '',