index.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <el-dropdown @command="handleCommand">
  3. <span class="avatar-dropdown">
  4. <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
  5. <img class="user-avatar" :src="avatar" alt="" />
  6. <div class="user-name">
  7. {{ username }}
  8. <i class="el-icon-arrow-down el-icon--right"></i>
  9. </div>
  10. </span>
  11. <el-dropdown-menu slot="dropdown">
  12. <el-dropdown-item command="personalCenter">
  13. <vab-icon :icon="['fas', 'user']"></vab-icon>
  14. 个人中心
  15. </el-dropdown-item>
  16. <el-dropdown-item command="logout" divided>
  17. <vab-icon :icon="['fas', 'sign-out-alt']"></vab-icon>
  18. 退出登录
  19. </el-dropdown-item>
  20. </el-dropdown-menu>
  21. </el-dropdown>
  22. </template>
  23. <script>
  24. import { mapGetters } from "vuex";
  25. import { recordRoute } from "@/config/settings";
  26. export default {
  27. name: "Avatar",
  28. computed: {
  29. ...mapGetters({
  30. avatar: "user/avatar",
  31. username: "user/username",
  32. }),
  33. },
  34. methods: {
  35. handleCommand(command) {
  36. switch (command) {
  37. case "logout":
  38. this.logout();
  39. break;
  40. case "personalCenter":
  41. this.personalCenter();
  42. break;
  43. }
  44. },
  45. personalCenter() {
  46. this.$router.push("/personalCenter/personalCenter");
  47. },
  48. logout() {
  49. this.$baseConfirm(
  50. "您确定要退出" + this.$baseTitle + "吗?",
  51. null,
  52. async () => {
  53. await this.$store.dispatch("user/logout");
  54. if (recordRoute) {
  55. const fullPath = this.$route.fullPath;
  56. this.$router.push(`/login?redirect=${fullPath}`);
  57. } else {
  58. this.$router.push("/login");
  59. }
  60. }
  61. );
  62. },
  63. },
  64. };
  65. </script>
  66. <style lang="scss" scoped>
  67. .avatar-dropdown {
  68. padding: 0;
  69. height: 50px;
  70. display: flex;
  71. align-items: center;
  72. align-content: center;
  73. justify-items: center;
  74. justify-content: center;
  75. .user-avatar {
  76. cursor: pointer;
  77. width: 40px;
  78. height: 40px;
  79. border-radius: 50%;
  80. }
  81. .user-name {
  82. margin-left: 5px;
  83. position: relative;
  84. margin-left: 5px;
  85. font-weight: 600;
  86. cursor: pointer;
  87. }
  88. }
  89. </style>