|
|
<template>
|
|
|
<scroll-bar>
|
|
|
<el-menu
|
|
|
mode="vertical"
|
|
|
:show-timeout="200"
|
|
|
:default-active="$route.path"
|
|
|
:collapse="isCollapse"
|
|
|
background-color="#304156"
|
|
|
text-color="#bfcbd9"
|
|
|
active-text-color="#409EFF"
|
|
|
>
|
|
|
<sidebar-item :routes="routes"></sidebar-item>
|
|
|
</el-menu>
|
|
|
</scroll-bar>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import SidebarItem from './SidebarItem'
|
|
|
import ScrollBar from '@/components/ScrollBar'
|
|
|
|
|
|
export default {
|
|
|
components: { SidebarItem, ScrollBar },
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
'sidebar',
|
|
|
'routers'
|
|
|
]),
|
|
|
routes() {
|
|
|
// return this.$router.options.routes
|
|
|
return this.routers
|
|
|
},
|
|
|
isCollapse() {
|
|
|
return !this.sidebar.opened
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
#abc
|
|
|
<template>
|
|
|
<!-- 使用名为 `scroll-bar` 的自定义组件（可能是用于实现滚动条相关功能的组件，比如自定义滚动条样式、添加滚动交互逻辑等），该组件作为外层容器，包裹内部的 `el-menu` 组件，以便为菜单提供滚动功能（如果有相应实现的话） -->
|
|
|
<scroll-bar>
|
|
|
<!-- 使用 Element UI 的 `el-menu` 菜单组件，设置菜单模式为 `vertical`（垂直方向展示），`:show-timeout` 属性设置为 `200`，表示菜单展开或收起时过渡动画的显示时长（单位可能是毫秒），`:default-active` 属性绑定为 `$route.path`，意味着会根据当前路由的路径来自动设置默认激活的菜单项（与当前页面匹配的菜单项处于激活状态），`:collapse` 属性绑定 `isCollapse` 变量（在计算属性中定义，与侧边栏是否折叠相关），用于控制菜单是否折叠显示，同时设置了背景颜色、文本颜色以及激活状态下的文本颜色，用于定义菜单的整体外观颜色风格 -->
|
|
|
<el-menu
|
|
|
mode="vertical"
|
|
|
:show-timeout="200"
|
|
|
:default-active="$route.path"
|
|
|
:collapse="isCollapse"
|
|
|
background-color="#304156"
|
|
|
text-color="#bfcbd9"
|
|
|
active-text-color="#409EFF"
|
|
|
>
|
|
|
<!-- 使用名为 `sidebar-item` 的自定义组件（在 `script` 部分有导入和注册，用于根据传入的路由配置信息动态生成侧边栏菜单的具体内容），通过 `:routes` 属性传递 `routes` 变量（在计算属性中定义，包含了菜单相关的路由配置数据），用于递归地构建完整的侧边栏菜单结构，展示各个菜单项及其嵌套子菜单等内容 -->
|
|
|
<sidebar-item :routes="routes"></sidebar-item>
|
|
|
</el-menu>
|
|
|
</scroll-bar>
|
|
|
</template>
|
|
|
<script>
|
|
|
// 从 `vuex` 中导入 `mapGetters` 函数，该函数用于将 Vuex 中的 `getters` 映射到组件的计算属性中，方便获取 Vuex 存储中的特定状态数据，以便在组件内使用。
|
|
|
import { mapGetters } from 'vuex';
|
|
|
// 从当前相对路径下导入名为 `SidebarItem` 的自定义组件，这个组件已经在模板部分出现，用于构建侧边栏菜单的具体菜单项和子菜单等内容，通过接收路由配置信息来实现动态菜单生成功能。
|
|
|
import SidebarItem from './SidebarItem';
|
|
|
// 从 `@/components/` 路径下导入名为 `ScrollBar` 的自定义组件，作为外层包裹 `el-menu` 的容器，用于提供滚动条相关功能（如前所述），可能包含自定义滚动条样式和交互逻辑等实现。
|
|
|
import ScrollBar from '@/components/ScrollBar';
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
// 在当前组件的 `components` 属性中注册 `SidebarItem` 和 `ScrollBar` 这两个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则。
|
|
|
SidebarItem,
|
|
|
ScrollBar
|
|
|
},
|
|
|
computed: {
|
|
|
// 使用 `mapGetters` 函数将 Vuex 中的 `sidebar` 和 `routers` 这两个 `getters` 映射到当前组件的计算属性中，这样在组件内部就可以直接通过 `this.sidebar` 和 `this.routers` 来获取对应的状态数据。`sidebar` 相关数据可能与侧边栏的整体状态（如是否打开等）有关，`routers` 则用于获取菜单相关的路由配置信息，用于构建侧边栏菜单。
|
|
|
...mapGetters([
|
|
|
'sidebar',
|
|
|
'routers'
|
|
|
]),
|
|
|
routes() {
|
|
|
// 定义一个名为 `routes` 的计算属性，原本代码中有注释掉的 `return this.$router.options.routes`，可能之前是尝试直接从路由实例的配置选项中获取路由信息。现在返回的是 `this.routers`，也就是通过 `mapGetters` 从 Vuex 中获取到的路由配置数据，这些数据会传递给 `sidebar-item` 组件用于构建侧边栏菜单，包含了各个菜单项的路径、嵌套关系、图标、标题等信息。
|
|
|
return this.routers;
|
|
|
},
|
|
|
isCollapse() {
|
|
|
// 定义一个名为 `isCollapse` 的计算属性，通过对 `this.sidebar.opened` 取反来判断侧边栏是否处于折叠状态。如果 `sidebar.opened` 为 `false`（即侧边栏未打开），那么 `isCollapse` 就为 `true`，表示侧边栏是折叠的；反之则为 `false`，表示侧边栏是展开的，该值会绑定到 `el-menu` 组件的 `:collapse` 属性上，用于控制菜单的折叠显示效果。
|
|
|
return!this.sidebar.opened;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
