perf: 当菜单加载慢时,添加 loading 动画,优化用户体验

This commit is contained in:
xiaoxian521
2022-12-03 21:56:33 +08:00
parent b4a566b2bf
commit fa5c97ffa4
3 changed files with 27 additions and 3 deletions

View File

@@ -59,7 +59,10 @@ watch(
</script>
<template>
<div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
<div
v-loading="menuData.length === 0"
:class="['sidebar-container', showLogo ? 'has-logo' : '']"
>
<Logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar
wrap-class="scrollbar-wrapper"
@@ -91,3 +94,9 @@ watch(
/>
</div>
</template>
<style scoped>
:deep(.el-loading-mask) {
opacity: 0.45;
}
</style>