Newer
Older
KaiFengPC / src / layout / components / Navbar.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <div class="navbar">
  3. <!-- <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
  4. <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> -->
  5. <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
  6.  
  7. <div class="right-menu">
  8. <template v-if="appStore.device !== 'mobile'">
  9. <!-- <header-search id="header-search" class="right-menu-item" /> -->
  10. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  11. <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
  12. <size-select id="size-select" class="right-menu-item hover-effect" />
  13. </el-tooltip> -->
  14. </template>
  15. <div class="avatar-container">
  16. <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
  17. <div class="avatar-wrapper">
  18. <img :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : userImg" class="user-avatar" />
  19. <el-icon><caret-bottom /></el-icon>
  20. </div>
  21. <template #dropdown>
  22. <el-dropdown-menu>
  23. <el-dropdown-item @click="dialogShow = true">个人中心</el-dropdown-item>
  24. <!-- <el-dropdown-item command="setLayout">
  25. <span>布局设置</span>
  26. </el-dropdown-item> -->
  27. <el-dropdown-item command="logout">
  28. <span>退出登录</span>
  29. </el-dropdown-item>
  30. </el-dropdown-menu>
  31. </template>
  32. </el-dropdown>
  33. </div>
  34. </div>
  35. <!-- 个人中心弹窗 -->
  36. <el-dialog v-model="dialogShow" title="个人中心" width="1100px" append-to-body>
  37. <UserCenter></UserCenter>
  38. </el-dialog>
  39. </div>
  40. </template>
  41.  
  42. <script setup>
  43. import { ElMessageBox } from 'element-plus';
  44. import Cookies from 'js-cookie';
  45. import Breadcrumb from '@/components/Breadcrumb';
  46. import TopNav from '@/components/TopNav';
  47. import Hamburger from '@/components/Hamburger';
  48. import Screenfull from '@/components/Screenfull';
  49. import SizeSelect from '@/components/SizeSelect';
  50. import HeaderSearch from '@/components/HeaderSearch';
  51. import useAppStore from '@/store/modules/app';
  52. import useUserStore from '@/store/modules/user';
  53. import useSettingsStore from '@/store/modules/settings';
  54. import UserCenter from '@/views/system/user/profile/index'; //个人中心
  55. import bus from '@/utils/mitt';
  56. import userImg from '@/assets/images/login/user.png'; //默认头像
  57.  
  58. const appStore = useAppStore();
  59. const userStore = useUserStore();
  60. const settingsStore = useSettingsStore();
  61. const router = useRouter();
  62. const dialogShow = ref(false);
  63.  
  64. function toggleSideBar() {
  65. appStore.toggleSideBar();
  66. }
  67.  
  68. function handleCommand(command) {
  69. switch (command) {
  70. case 'setLayout':
  71. setLayout();
  72. break;
  73. case 'logout':
  74. logout();
  75. break;
  76. default:
  77. break;
  78. }
  79. }
  80. // 退出登录
  81. function logout() {
  82. ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
  83. confirmButtonText: '确定',
  84. cancelButtonText: '取消',
  85. type: 'warning',
  86. })
  87. .then(() => {
  88. userStore.logOut().then(() => {
  89. location.href = '/';
  90. });
  91. Cookies.remove('xiaogan-Token'); //清除token
  92. })
  93. .catch(() => {});
  94. }
  95.  
  96. const emits = defineEmits(['setLayout']);
  97. function setLayout() {
  98. emits('setLayout');
  99. }
  100. onMounted(() => {
  101. bus.on('closeUserCenter', e => {
  102. dialogShow.value = false;
  103. });
  104. });
  105. onBeforeUnmount(() => {
  106. bus.off('closeUserCenter');
  107. });
  108. </script>
  109.  
  110. <style lang="scss" scoped>
  111. @import '@/assets/styles/variables.module.scss';
  112. .navbar {
  113. height: 50px;
  114. overflow: hidden;
  115. position: relative;
  116. background: $mainBg;
  117. color: #fff;
  118. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  119.  
  120. .hamburger-container {
  121. line-height: 46px;
  122. height: 100%;
  123. float: left;
  124. cursor: pointer;
  125. transition: background 0.3s;
  126. -webkit-tap-highlight-color: transparent;
  127.  
  128. &:hover {
  129. background: rgba(0, 0, 0, 0.025);
  130. }
  131. }
  132.  
  133. .breadcrumb-container {
  134. float: left;
  135. }
  136.  
  137. .topmenu-container {
  138. position: absolute;
  139. left: 50px;
  140. }
  141.  
  142. .errLog-container {
  143. display: inline-block;
  144. vertical-align: top;
  145. }
  146.  
  147. .right-menu {
  148. float: right;
  149. height: 100%;
  150. line-height: 50px;
  151. display: flex;
  152.  
  153. &:focus {
  154. outline: none;
  155. }
  156. .iconReturn {
  157. margin-top: 10px;
  158. cursor: pointer;
  159. }
  160. .right-menu-item {
  161. display: inline-block;
  162. padding: 0 8px;
  163. height: 100%;
  164. font-size: 18px;
  165. vertical-align: text-bottom;
  166.  
  167. &.hover-effect {
  168. cursor: pointer;
  169. transition: background 0.3s;
  170.  
  171. &:hover {
  172. background: rgba(0, 0, 0, 0.025);
  173. }
  174. }
  175. }
  176.  
  177. .avatar-container {
  178. margin-right: 40px;
  179.  
  180. .avatar-wrapper {
  181. margin-top: 5px;
  182. position: relative;
  183.  
  184. .user-avatar {
  185. cursor: pointer;
  186. width: 40px;
  187. height: 40px;
  188. border-radius: 10px;
  189. }
  190.  
  191. i {
  192. cursor: pointer;
  193. position: absolute;
  194. right: -20px;
  195. top: 25px;
  196. font-size: 12px;
  197. }
  198. }
  199. }
  200. }
  201. }
  202. </style>