twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/layout/components/sidebar/horizontal.vue
View File

@ -41,7 +41,10 @@ watch(
</script> </script>
<template> <template>
<div class="horizontal-header"> <div
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
class="horizontal-header"
>
<div class="horizontal-header-left" @click="backHome"> <div class="horizontal-header-left" @click="backHome">
<FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" /> <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
<h4>{{ title }}</h4> <h4>{{ title }}</h4>
@ -129,6 +132,10 @@ watch(
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-loading-mask) {
opacity: 0.45;
}
.translation { .translation {
::v-deep(.el-dropdown-menu__item) { ::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px; padding: 5px 40px;

10
src/layout/components/sidebar/mixNav.vue
View File

@ -58,7 +58,11 @@ watch(
</script> </script>
<template> <template>
<div v-if="device !== 'mobile'" class="horizontal-header"> <div
v-if="device !== 'mobile'"
class="horizontal-header"
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
>
<el-menu <el-menu
router router
ref="menuRef" ref="menuRef"
@ -161,6 +165,10 @@ watch(
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-loading-mask) {
opacity: 0.45;
}
.translation { .translation {
::v-deep(.el-dropdown-menu__item) { ::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px; padding: 5px 40px;

11
src/layout/components/sidebar/vertical.vue
View File

@ -59,7 +59,10 @@ watch(
</script> </script>
<template> <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" /> <Logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar <el-scrollbar
wrap-class="scrollbar-wrapper" wrap-class="scrollbar-wrapper"
@ -91,3 +94,9 @@ watch(
/> />
</div> </div>
</template> </template>
<style scoped>
:deep(.el-loading-mask) {
opacity: 0.45;
}
</style>