chore: 部门面板骨架屏加载效果
This commit is contained in:
parent
dacb49d0db
commit
bc2f5be973
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user