修复分类在顶部,当子分类数量过多超出屏幕范围的问题。

This commit is contained in:
unknown 2024-06-16 20:18:54 +08:00
parent acb9231915
commit 2d82702efe
2 changed files with 101 additions and 78 deletions

View File

@ -130,20 +130,20 @@
<KeyboardArrowDownRound></KeyboardArrowDownRound>
</Icon>
</div>
<ul
<div
v-show="
classification.childList &&
classification.childList.length > 0 &&
classificationChildShowHiddenMap.has(classification.id)
"
class="classification-child-list"
:class="[
`${
store.setting.classification.layout === 'top'
? 'fixed z-[10000] rounded drop-shadow-[0_0_6px_rgba(0,0,0,0.2)] origin-top-left pt-1 mt-1'
? '!fixed !z-[10000] !rounded-lg !drop-shadow-[0_0_6px_rgba(0,0,0,0.2)] !origin-top-left !pt-1 !mt-1'
: ''
}`,
]"
:data-simplebar="store.setting.classification.layout === 'top'"
:style="{
backgroundColor:
store.setting.classification.layout === 'top'
@ -156,7 +156,12 @@
store.setting.classification.layout === 'top'
? classificationWidth + 'px'
: '',
maxHeight:
store.setting.classification.layout === 'top' ? '300px' : 'auto',
}"
>
<ul
class="classification-child-list h-full"
:classification-parent-id="classification.id"
>
<li
@ -183,7 +188,9 @@
`${
store.setting.classification.layout !== 'top' ? 'rounded' : ''
}`,
`${store.setting.classification.mode === 'normal' ? 'px-2' : ''}`,
`${
store.setting.classification.mode === 'normal' ? 'px-2' : ''
}`,
]"
:style="{
color:
@ -237,6 +244,7 @@
}"
></li>
</ul>
</div>
</li>
</ul>
</div>
@ -299,10 +307,17 @@ watch(
() => {
// +1
count.value = count.value + 1;
classificationChildShowHiddenMap.value = new Map();
// DOM
nextTick(() => {
//
createSimpleBar();
//
setClassificationWidth();
// ;
createClassificationParentSortable();
//
createClassificationChildSortable();
});
}
);
@ -787,6 +802,8 @@ function createClassificationParentSortable() {
setClassificationWidth();
// - 34
height.value = document.documentElement.clientHeight - 34;
//
createClassificationChildSortable();
});
}
},
@ -815,7 +832,7 @@ function createClassificationChildSortable() {
classificationChildSortable.push(
Sortable.create(<HTMLElement>element, {
animation: 0,
forceFallback: true,
forceFallback: false,
fallbackTolerance: 4,
disabled: lockClassification,
onStart() {

View File

@ -154,6 +154,12 @@ watch(
nextTick(() => {
//
resize();
//
setItemWidth();
//
createItemSortable();
//
clearBatchOperation();
//
scrollToTop(itemContentSimpleBar);
});