|
|
<template>
|
|
|
<div class="app-wrapper" :class="classObj">
|
|
|
<sidebar class="sidebar-container"></sidebar>
|
|
|
<div class="main-container">
|
|
|
<navbar></navbar>
|
|
|
<app-main></app-main>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { Navbar, Sidebar, AppMain } from './components'
|
|
|
import ResizeMixin from './mixin/ResizeHandler'
|
|
|
|
|
|
export default {
|
|
|
name: 'layout',
|
|
|
components: {
|
|
|
Navbar,
|
|
|
Sidebar,
|
|
|
AppMain
|
|
|
},
|
|
|
mixins: [ResizeMixin],
|
|
|
computed: {
|
|
|
sidebar() {
|
|
|
return this.$store.state.app.sidebar
|
|
|
},
|
|
|
device() {
|
|
|
return this.$store.state.app.device
|
|
|
},
|
|
|
classObj() {
|
|
|
return {
|
|
|
hideSidebar: !this.sidebar.opened,
|
|
|
withoutAnimation: this.sidebar.withoutAnimation,
|
|
|
mobile: this.device === 'mobile'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@import "src/styles/mixin.scss";
|
|
|
.app-wrapper {
|
|
|
@include clearfix;
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
#abc
|
|
|
<template>
|
|
|
<!-- 最外层的 `div` 元素，类名为 `app-wrapper`，并且通过 `:class="classObj"` 进行动态类名绑定，根据 `classObj` 计算属性返回的对象来决定应用哪些类名，用于实现根据不同条件动态改变样式的功能 -->
|
|
|
<div class="app-wrapper" :class="classObj">
|
|
|
<!-- 使用名为 `sidebar` 的自定义组件，类名为 `sidebar-container`，通常这个组件用于展示页面的侧边栏内容，比如导航菜单等功能模块 -->
|
|
|
<sidebar class="sidebar-container"></sidebar>
|
|
|
<!-- 一个 `div` 元素，类名为 `main-container`，作为主要内容区域的容器，用于包裹页面中除侧边栏之外的核心展示内容 -->
|
|
|
<div class="main-container">
|
|
|
<!-- 使用名为 `navbar` 的自定义组件，用于展示页面顶部的导航栏，包含诸如页面切换、功能操作入口等元素 -->
|
|
|
<navbar></navbar>
|
|
|
<!-- 使用名为 `app-main` 的自定义组件，用于承载页面的主体内容，例如数据展示、操作表单等具体业务相关的内容展示 -->
|
|
|
<app-main></app-main>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
// 从 `./components` 目录下分别导入 `Navbar`、`Sidebar`、`AppMain` 这三个自定义组件，这些组件在页面布局中分别承担不同的功能模块展示任务，如前面模板部分注释所述
|
|
|
import { Navbar, Sidebar, AppMain } from './components';
|
|
|
// 从 `./mixin/ResizeHandler` 路径导入 `ResizeMixin`，混入（`mixins`）是 Vue.js 中一种复用代码的方式，`ResizeMixin` 里可能包含了处理页面尺寸变化相关的逻辑，会被混入到当前组件中使用
|
|
|
import ResizeMixin from './mixin/ResizeHandler';
|
|
|
|
|
|
export default {
|
|
|
name: 'layout',
|
|
|
components: {
|
|
|
// 在当前组件的 `components` 属性中注册 `Navbar`、`Sidebar`、`AppMain` 这三个组件，使得在模板中可以直接通过对应的标签名来调用它们，遵循 Vue.js 组件化开发的组件注册和使用规则
|
|
|
Navbar,
|
|
|
Sidebar,
|
|
|
AppMain
|
|
|
},
|
|
|
mixins: [ResizeMixin],
|
|
|
computed: {
|
|
|
sidebar() {
|
|
|
// 计算属性 `sidebar`，通过访问 Vuex 存储（`$store`）中 `app` 模块下的 `sidebar` 状态对象，获取侧边栏相关的状态信息，例如侧边栏是否打开等，供其他地方使用（比如动态控制侧边栏显示隐藏的样式等）
|
|
|
return this.$store.state.app.sidebar;
|
|
|
},
|
|
|
device() {
|
|
|
// 计算属性 `device`，同样从 `$store` 中获取 `app` 模块下关于设备类型的状态信息，判断当前设备是 `mobile`（移动端）还是其他类型（如桌面端等），以便根据设备类型做不同的布局或功能适配
|
|
|
return this.$store.state.app.device;
|
|
|
},
|
|
|
classObj() {
|
|
|
// 计算属性 `classObj`，返回一个对象，对象中的属性名对应要添加或移除的类名，属性值为布尔值，根据相关状态决定是否应用对应的类名。例如 `hideSidebar` 类名会在侧边栏未打开（`!this.sidebar.opened`）时添加，用于隐藏侧边栏；`withoutAnimation` 类名依据侧边栏是否设置无动画（`this.sidebar.withoutAnimation`）来决定是否添加；`mobile` 类名在设备类型为移动端（`this.device === 'mobile'`）时添加，实现针对移动端的样式调整等功能
|
|
|
return {
|
|
|
hideSidebar:!this.sidebar.opened,
|
|
|
withoutAnimation: this.sidebar.withoutAnimation,
|
|
|
mobile: this.device ==='mobile'
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
// 使用 `@import` 指令导入 `src/styles/mixin.scss` 文件，这个文件里可能定义了一些可复用的 SCSS 样式混入（`mixin`），可以在当前样式文件中调用，以减少样式代码的重复编写并方便样式的统一管理。
|
|
|
@import "src/styles/mixin.scss";
|
|
|
.app-wrapper {
|
|
|
// 使用导入的 `clearfix` 混入（假设 `mixin.scss` 中定义了 `clearfix` 混入用于清除浮动等布局相关效果），来处理元素的布局样式，确保内部元素的正确排列。
|
|
|
@include clearfix;
|
|
|
// 设置元素的定位方式为 `relative`（相对定位），为后续可能的绝对定位子元素提供定位参考，便于进行更灵活的页面布局。
|
|
|
position: relative;
|
|
|
// 将元素的高度设置为 `100%`，通常是相对于父元素的高度占比，可能用于撑满整个可视区域或者某个容器区域等情况，具体取决于父元素的高度设置。
|
|
|
height: 100%;
|
|
|
// 将元素的宽度设置为 `100%`，使其在水平方向上占满父元素或者所在的容器宽度，实现全屏或者占满指定宽度区域的效果。
|
|
|
width: 100%;
|
|
|
}
|
|
|
</style> |
