|
|
<template>
|
|
|
<el-menu class="navbar" mode="horizontal">
|
|
|
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
|
|
<breadcrumb></breadcrumb>
|
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
|
<div class="avatar-wrapper">
|
|
|
<img class="user-avatar" :src="avatar">
|
|
|
<i class="el-icon-caret-bottom"></i>
|
|
|
</div>
|
|
|
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
|
|
<router-link class="inlineBlock" to="/">
|
|
|
<el-dropdown-item>
|
|
|
首页
|
|
|
</el-dropdown-item>
|
|
|
</router-link>
|
|
|
<el-dropdown-item divided>
|
|
|
<span @click="logout" style="display:block;">退出</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</el-menu>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
|
import Hamburger from '@/components/Hamburger'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
Breadcrumb,
|
|
|
Hamburger
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
'sidebar',
|
|
|
'avatar'
|
|
|
])
|
|
|
},
|
|
|
methods: {
|
|
|
toggleSideBar() {
|
|
|
this.$store.dispatch('ToggleSideBar')
|
|
|
},
|
|
|
logout() {
|
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
|
location.reload() // 为了重新实例化vue-router对象 避免bug
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
.navbar {
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
border-radius: 0px !important;
|
|
|
.hamburger-container {
|
|
|
line-height: 58px;
|
|
|
height: 50px;
|
|
|
float: left;
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
.screenfull {
|
|
|
position: absolute;
|
|
|
right: 90px;
|
|
|
top: 16px;
|
|
|
color: red;
|
|
|
}
|
|
|
.avatar-container {
|
|
|
height: 50px;
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
right: 35px;
|
|
|
.avatar-wrapper {
|
|
|
cursor: pointer;
|
|
|
margin-top: 5px;
|
|
|
position: relative;
|
|
|
.user-avatar {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
.el-icon-caret-bottom {
|
|
|
position: absolute;
|
|
|
right: -20px;
|
|
|
top: 25px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
#abc
|
|
|
<template>
|
|
|
<!-- 使用 Element UI 的 `el-menu` 组件创建一个水平模式（`mode="horizontal"`）的导航栏，类名为 `navbar`，用于构建页面顶部的导航菜单结构 -->
|
|
|
<el-menu class="navbar" mode="horizontal">
|
|
|
<!-- 使用名为 `hamburger` 的自定义组件，类名为 `hamburger-container`，通过属性绑定传递 `toggleClick` 方法（用于切换侧边栏显示状态）以及 `isActive` 属性（与侧边栏是否打开状态相关），通常这个组件会以汉堡菜单图标形式呈现，点击可展开或收起侧边栏 -->
|
|
|
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
|
|
<!-- 使用名为 `breadcrumb` 的自定义组件，用于展示面包屑导航，显示当前页面在整个页面层级结构中的位置路径信息，方便用户知晓所在页面的层级关系 -->
|
|
|
<breadcrumb></breadcrumb>
|
|
|
<!-- 使用 Element UI 的 `el-dropdown` 下拉菜单组件，类名为 `avatar-container`，设置触发下拉菜单的方式为点击（`trigger="click"`），用于创建一个包含用户头像等相关操作选项的下拉菜单 -->
|
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
|
<!-- 一个 `div` 元素，类名为 `avatar-wrapper`，作为用户头像及其相关元素的容器，用于包裹头像图片和下拉箭头图标等 -->
|
|
|
<div class="avatar-wrapper">
|
|
|
<!-- 使用 `img` 图片元素，通过 `:src` 绑定 `avatar` 变量（在计算属性中通过 Vuex 的 `getters` 获取，用于显示用户头像图片资源），设置类名为 `user-avatar`，用于展示用户的头像 -->
|
|
|
<img class="user-avatar" :src="avatar">
|
|
|
<!-- 使用 Element UI 的图标组件 `el-icon-caret-bottom`，展示一个向下的箭头图标，用于提示用户该区域可点击展开下拉菜单，增强视觉提示效果 -->
|
|
|
<i class="el-icon-caret-bottom"></i>
|
|
|
</div>
|
|
|
<!-- `el-dropdown-menu` 组件，类名为 `user-dropdown`，通过 `slot="dropdown"` 插槽与外层的 `el-dropdown` 组件关联，用于定义下拉菜单中具体的菜单项内容 -->
|
|
|
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
|
|
<!-- 使用 `router-link` 组件创建一个路由链接，类名为 `inlineBlock`，链接到根路径（`/`），点击可导航到首页，并且将 `el-dropdown-item` 作为子元素包裹在其中，用于在下拉菜单中展示“首页”这一菜单项 -->
|
|
|
<router-link class="inlineBlock" to="/">
|
|
|
<el-dropdown-item>
|
|
|
首页
|
|
|
</el-dropdown-item>
|
|
|
</router-link>
|
|
|
<!-- `el-dropdown-item` 组件，设置了 `divided` 属性（可能用于添加分割线样式，区分不同菜单项），内部包含一个 `span` 元素，点击该 `span` 元素会触发 `logout` 方法，用于执行退出登录的操作，在下拉菜单中展示“退出”这一菜单项 -->
|
|
|
<el-dropdown-item divided>
|
|
|
<span @click="logout" style="display:block;">退出</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</el-menu>
|
|
|
</template>
|
|
|
<script>
|
|
|
// 从 `vuex` 中导入 `mapGetters` 函数，这个函数用于将 Vuex 中的 `getters` 映射到组件的计算属性中，方便获取 Vuex 中存储的状态数据。
|
|
|
import { mapGetters } from 'vuex';
|
|
|
// 从 `@/components/` 路径下导入名为 `Breadcrumb` 的自定义组件，该组件用于展示面包屑导航相关功能逻辑，已在前面模板部分注释中介绍其作用。
|
|
|
import Breadcrumb from '@/components/Breadcrumb';
|
|
|
// 从 `@/components/` 路径下导入名为 `Hamburger` 的自定义组件，用于实现侧边栏展开收起的汉堡菜单图标相关功能逻辑，同样在模板部分注释有相关说明。
|
|
|
import Hamburger from '@/components/Hamburger';
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
// 在当前组件的 `components` 属性中注册 `Breadcrumb` 和 `Hamburger` 这两个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则。
|
|
|
Breadcrumb,
|
|
|
Hamburger
|
|
|
},
|
|
|
computed: {
|
|
|
// 使用 `mapGetters` 函数将 Vuex 中的 `sidebar` 和 `avatar` 这两个 `getters` 映射到当前组件的计算属性中，这样在组件内部就可以直接通过 `this.sidebar` 和 `this.avatar` 来获取对应的状态数据，`sidebar` 相关数据可能用于判断侧边栏的状态，`avatar` 则用于显示用户头像图片资源等。
|
|
|
...mapGetters([
|
|
|
'sidebar',
|
|
|
'avatar'
|
|
|
])
|
|
|
},
|
|
|
methods: {
|
|
|
toggleSideBar() {
|
|
|
// 定义 `toggleSideBar` 方法，当调用该方法时，通过 `$store.dispatch` 方法触发 Vuex 中的 `ToggleSideBar` 异步操作（通常对应一个 `action`，在 Vuex 的 `store` 中定义了相关逻辑，比如改变侧边栏的显示或隐藏状态等），用于实现点击汉堡菜单图标切换侧边栏显示状态的功能。
|
|
|
this.$store.dispatch('ToggleSideBar')
|
|
|
},
|
|
|
logout() {
|
|
|
// 定义 `logout` 方法，当点击“退出”菜单项时触发该方法，通过 `$store.dispatch` 方法触发 Vuex 中的 `LogOut` 异步操作（同样在 `store` 中有对应逻辑，比如清除用户登录状态等相关操作），并且在 `LogOut` 异步操作成功完成（通过 `.then` 回调）后，调用 `location.reload` 方法刷新页面，目的是重新实例化 `vue-router` 对象，避免可能出现的一些路由相关的 `bug`，从而实现完整的退出登录并刷新页面的功能。
|
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
|
location.reload(); // 为了重新实例化vue-router对象 避免bug
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
// 定义类名为 `navbar` 的样式规则，用于设置整个导航栏的基础样式。
|
|
|
.navbar {
|
|
|
// 设置导航栏的高度为 `50px`，使导航栏在垂直方向上占据一定的空间高度，保持统一的外观高度。
|
|
|
height: 50px;
|
|
|
// 设置行高为 `50px`，使得导航栏内的文本等元素在垂直方向上能够居中对齐，呈现出整齐美观的视觉效果。
|
|
|
line-height: 50px;
|
|
|
// 覆盖 `el-menu` 组件默认的边框圆角样式，将其设置为 `0px`，使导航栏呈现出直角的外观效果，更符合特定的设计风格要求，`!important` 用于提升样式优先级，确保该样式能够生效。
|
|
|
border-radius: 0px!important;
|
|
|
// 定义类名为 `hamburger-container` 的内部样式规则，用于设置汉堡菜单图标所在容器的样式。
|
|
|
.hamburger-container {
|
|
|
// 设置行高为 `58px`，调整汉堡菜单图标在垂直方向上的位置，使其在导航栏内有合适的布局展示效果。
|
|
|
line-height: 58px;
|
|
|
// 设置高度为 `50px`，与导航栏高度保持一致，确保在垂直方向上占满整个导航栏的空间。
|
|
|
height: 50px;
|
|
|
// 设置元素向左浮动，使汉堡菜单图标能够靠导航栏左侧排列，方便用户操作以及整体布局的合理性。
|
|
|
float: left;
|
|
|
// 设置左右内边距为 `0 10px`，给汉堡菜单图标在水平方向上留出一定的空间，避免图标与其他元素过于紧凑或重叠。
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
// 定义类名为 `screenfull` 的样式规则（从代码上下文看，此处可能暂时未完全使用到该样式，也许后续有相关功能扩展），用于设置一个可能与全屏相关功能的元素样式（比如全屏按钮等）。
|
|
|
.screenfull {
|
|
|
// 设置元素的定位方式为 `absolute`（绝对定位），使其可以相对于最近的已定位祖先元素进行定位，方便精确控制其在导航栏中的位置。
|
|
|
position: absolute;
|
|
|
// 设置元素距离右侧 `90px` 的距离，用于确定其在水平方向上的位置，使其出现在导航栏右侧的特定位置处。
|
|
|
right: 90px;
|
|
|
// 设置元素距离顶部 `16px` 的距离，用于确定其在垂直方向上的位置，调整其在导航栏中的垂直布局位置。
|
|
|
top: 16px;
|
|
|
// 设置元素的颜色为红色，用于突出显示该元素，可能起到视觉提示等作用（同样具体功能需看后续实现）。
|
|
|
color: red;
|
|
|
}
|
|
|
// 定义类名为 `avatar-container` 的样式规则，用于设置包含用户头像的下拉菜单容器的样式。
|
|
|
.avatar-container {
|
|
|
// 设置高度为 `50px`，与导航栏高度保持一致，使其在垂直方向上占满对应的空间，呈现出整齐的布局效果。
|
|
|
height: 50px;
|
|
|
// 设置元素以行内块级元素（`inline-block`）的形式展示，使其可以在水平方向上与其他元素并排排列，同时又能设置宽度、高度等块级元素的属性。
|
|
|
display: inline-block;
|
|
|
// 设置元素的定位方式为 `absolute`（绝对定位），便于精确控制其在导航栏右侧的位置，方便用户操作以及整体布局的合理性。
|
|
|
position: absolute;
|
|
|
// 设置元素距离右侧 `35px` 的距离，确定其在水平方向上的具体位置，使其出现在导航栏右侧合适的位置处。
|
|
|
right: 35px;
|
|
|
// 定义类名为 `avatar-wrapper` 的内部样式规则，用于设置用户头像及其相关元素的包裹容器的样式。
|
|
|
.avatar-wrapper {
|
|
|
// 设置鼠标指针样式为 `cursor: pointer`，当鼠标悬停在该区域时，会显示为手型指针，提示用户该区域可点击操作，增强交互性。
|
|
|
cursor: pointer;
|
|
|
// 设置顶部外边距为 `5px`，用于调整用户头像在垂直方向上的位置，使其在下拉菜单容器中有合适的布局展示效果。
|
|
|
margin-top: 5px;
|
|
|
// 设置元素的定位方式为 `relative`（相对定位），为内部的绝对定位元素（如头像下方的下拉箭头图标）提供定位参考，便于进行更精细的布局调整。
|
|
|
position: relative;
|
|
|
// 定义类名为 `user-avatar` 的内部样式规则，用于设置用户头像图片的样式。
|
|
|
.user-avatar {
|
|
|
// 设置图片的宽度为 `40px`，确定头像图片在水平方向上的尺寸大小，使其呈现出合适的视觉效果。
|
|
|
width: 40px;
|
|
|
// 设置图片的高度为 `40px`，确定头像图片在垂直方向上的尺寸大小，保持头像图片为正方形的外观效果，符合常见的头像展示样式要求。
|
|
|
height: 40px;
|
|
|
// 设置图片的边框圆角为 `10px`，使头像图片呈现出一定的圆角效果，增加视觉上的柔和感和美观度。
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
// 定义类名为 `el-icon-caret-bottom` 的内部样式规则，用于设置下拉箭头图标的样式。
|
|
|
.el-icon-caret-bottom {
|
|
|
// 设置元素的定位方式为 `absolute`（绝对定位），使其可以相对于外层的 `avatar-wrapper`（相对定位的祖先元素）进行精确的位置定位。
|
|
|
position: absolute;
|
|
|
// 设置元素距离右侧 `-20px` 的距离，使其出现在头像图片的右侧偏左一点的位置，用于指示该区域可点击展开下拉菜单。
|
|
|
right: -20px;
|
|
|
// 设置元素距离顶部 `25px` 的距离，调整其在垂直方向上的位置，使其在头像下方合适的位置处展示，符合常见的下拉菜单箭头图标布局位置要求。
|
|
|
top: 25px;
|
|
|
// 设置图标的字体大小为 `12px`，调整下拉箭头图标的大小，使其在视觉上与头像等元素比例协调，呈现出合适的视觉效果。
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
