index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
  3. <span class="avatar-dropdown">
  4. <el-avatar class="user-avatar" :src="avatar" />
  5. <div class="username">
  6. <span class="hidden-xs-only">{{ username }}</span>
  7. <vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': active }" icon="arrow-down-s-line" />
  8. </div>
  9. </span>
  10. <template #dropdown>
  11. <el-dropdown-menu>
  12. <el-dropdown-item command="logout">
  13. <vab-icon icon="logout-circle-r-line" />
  14. <span>{{ translate('退出登录') }}</span>
  15. </el-dropdown-item>
  16. </el-dropdown-menu>
  17. </template>
  18. </el-dropdown>
  19. </template>
  20. <script lang="ts" setup>
  21. import { translate } from '/@/i18n'
  22. import { useUserStore } from '/@/store/modules/user'
  23. import { toLoginRoute } from '/@/utils/routes'
  24. defineOptions({
  25. name: 'VabAvatar',
  26. })
  27. const route = useRoute()
  28. const router = useRouter()
  29. const userStore = useUserStore()
  30. const { avatar, username } = storeToRefs(userStore)
  31. const { logout } = userStore
  32. const active = ref<boolean>(false)
  33. const handleVisibleChange = (value: boolean) => {
  34. active.value = value
  35. }
  36. const handleCommand = async (command: any) => {
  37. switch (command) {
  38. case 'logout':
  39. await logout()
  40. await router.push(toLoginRoute(route.fullPath))
  41. break
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. .avatar-dropdown {
  47. display: flex;
  48. align-content: center;
  49. align-items: center;
  50. justify-content: center;
  51. justify-items: center;
  52. .user-avatar {
  53. box-sizing: border-box;
  54. width: 40px;
  55. height: 40px;
  56. padding: 8px;
  57. margin-left: 15px;
  58. cursor: pointer;
  59. border-radius: 50%;
  60. }
  61. .username {
  62. position: relative;
  63. display: flex;
  64. align-content: center;
  65. align-items: center;
  66. width: max-content;
  67. height: 40px;
  68. margin-left: 6px;
  69. line-height: 40px;
  70. cursor: pointer;
  71. [class*='ri-'] {
  72. margin-left: 0 !important;
  73. }
  74. }
  75. }
  76. </style>