by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dap 2024-11-05 14:04:13 +08:00
parent dacb49d0db
commit bc2f5be973
1 changed files with 59 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web-antd/src/views/system/user/dept-tree.vue
View File

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