zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show avatar placeholder when loading user avatar

Browse Source
This commit is contained in:
MaysWind
2023-07-02 23:34:09 +08:00
parent 9cd22bdc06
commit 748cf68055
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/MainLayout.vue
+14 -2
View File
@@ -107,7 +107,13 @@
<v-icon :icon="(theme === 'light' ? icons.themeLight : (theme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
</v-btn>
<v-avatar class="cursor-pointer" color="primary" variant="tonal">
<v-img :src="currentUserAvatar" v-if="currentUserAvatar"/>
<v-img :src="currentUserAvatar" v-if="currentUserAvatar">
<template v-slot:placeholder>
<div class="d-flex align-center justify-center fill-height">
<v-icon :icon="icons.user"/>
</div>
</template>
</v-img>
<v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
<v-menu activator="parent" width="230" location="bottom end" offset="14px">
<v-list>
@@ -115,7 +121,13 @@
<template #prepend>
<v-list-item-action start>
<v-avatar color="primary" variant="tonal">
<v-img :src="currentUserAvatar" v-if="currentUserAvatar"/>
<v-img :src="currentUserAvatar" v-if="currentUserAvatar">
<template v-slot:placeholder>
<div class="d-flex align-center justify-center fill-height">
<v-icon :icon="icons.user"/>
</div>
</template>
</v-img>
<v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
</v-avatar>
</v-list-item-action>
src/views/desktop/user/settings/UserBasicSettingTab.vue
+7 -1
View File
@@ -9,7 +9,13 @@
<v-card-text class="d-flex">
<v-avatar rounded="lg" color="primary" variant="tonal" size="100" class="me-4">
<v-img :src="oldProfile.avatar" v-if="oldProfile.avatar"/>
<v-img :src="oldProfile.avatar" v-if="oldProfile.avatar">
<template v-slot:placeholder>
<div class="d-flex align-center justify-center fill-height">
<v-icon size="48" :icon="icons.user"/>
</div>
</template>
</v-img>
<v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/>
</v-avatar>
<div class="d-flex flex-column justify-center gap-5">