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

!106 feat(tab): add horizontal scroll

Browse Source 
Merge pull request !106 from forget skyrim/N/A
This commit is contained in:
就眠儀式 2022-12-06 17:59:48 +00:00 committed by Gitee
commit 38b2941990
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 renderTabIcon = (attrs: Record<string, unknown>) => {
const tab = attrs.tabData as TabData; const tab = attrs.tabData as TabData;
if (typeof tab.icon === "function") { if (typeof tab.icon === "function") {
@ -335,6 +348,7 @@ provide("active", active);
> >
<ul <ul
ref="navRef" ref="navRef"
@wheel="horizontalScroll"
:class="[ :class="[
'layui-tab-title', 'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : '', props.tabPosition ? `is-${tabPosition}` : '',