chore: 部门面板骨架屏加载效果

This commit is contained in:
dap 2024-11-05 14:04:13 +08:00
parent dacb49d0db
commit bc2f5be973

View File

@ -44,8 +44,16 @@ onMounted(reload);
</script>
<template>
<Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
<div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
<div :class="$attrs.class">
<Skeleton
:loading="showTreeSkeleton"
:paragraph="{ rows: 8 }"
active
class="p-[8px]"
>
<div
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
>
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
<div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
<InputSearch
@ -60,7 +68,7 @@ onMounted(reload);
</template>
</InputSearch>
</div>
<div class="px-[8px]">
<div class="h-full overflow-x-hidden px-[8px]">
<Tree
v-bind="$attrs"
v-if="deptTreeArray.length > 0"
@ -78,7 +86,9 @@ onMounted(reload);
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
label.substring(label.indexOf(searchValue) + searchValue.length)
label.substring(
label.indexOf(searchValue) + searchValue.length,
)
}}
</span>
<span v-else>{{ label }}</span>
@ -94,4 +104,5 @@ onMounted(reload);
</div>
</div>
</Skeleton>
</div>
</template>