## 目标 完成侧边通栏布局模式  ### 创建文件 在layouts目录下创建一个side-layout文件夹，然后在当前目录下创建一个index.vue的文件，首先我们先到naive-ui的组件库中，查看是否有满足需求的布局样式。  在基础的demo种有一个可以满足我们需求的例子，我们先直接拷贝过来，进行改造 ```vue 海淀桥 颐和园路 平山道 成府路 .n-layout-header, .n-layout-footer { background: rgba(128, 128, 128, 0.2); padding: 24px; } .n-layout-sider { background: rgba(128, 128, 128, 0.3); } .n-layout-content { background: rgba(128, 128, 128, 0.4); } ``` ### 切换全局布局样式 我们在base-layout中增加一种样式(只写需要的代码)： ```css ``` 修改全局主题配置项： 在config/layout-theme.ts中： ```typescript { layout: 'side', // 将mix调整为side } ``` 刷新页面 ### 调整布局 首先我们还是先占满全屏 ### 配置项复制 我们将全部的配置项从mix-layout中拷贝过来 ```typescript import { LayoutContent, LayoutSider, Logo, Title } from '~/layouts/common' const props = withDefaults(defineProps<{ headerHeight?: number logo?: string title?: string siderWidth?: number siderCollapsedWidth?: number showSiderTrigger?: boolean | 'bar' | 'arrow-circle' }>(), { headerHeight: 48, siderWidth: 240, siderCollapsedWidth: 48, }) const headerHeightVar = computed(() => `${props.headerHeight}px`) const contentHeightVar = computed(() => `calc(100vh - ${props.headerHeight}px)`) ``` ### 改造侧边栏 将n-layout-sider 替换成 ```html 海淀桥 ``` ### 配置header 样式部分和mix-layout相同 ```css .pro-admin-layout-header{ height: v-bind(headerHeightVar); } ``` 代码部分： ```html 颐和园路 ``` ### 内容部分 将n-layout-content替换成LayoutContent ```html ``` 但是由于我们的布局高度没有撑开，导致了背景色没有完全铺开，那么我们先来调一下layout的背景色。 ```html ``` 这样就可以正常生效了 接下来我们的侧边栏是支持两种颜色的模式的，支持反转色模式。 所以我们在属性中传入一个：inverted来支持，默认是false ```typescript const props = withDefaults(defineProps<{ headerHeight?: number logo?: string title?: string siderWidth?: number siderCollapsedWidth?: number showSiderTrigger?: boolean | 'bar' | 'arrow-circle' inverted?: boolean // 反转色 }>(), { headerHeight: 48, siderWidth: 240, siderCollapsedWidth: 48, inverted: false, // 默认不起用 }) ``` 在template中 ```html ``` 然后我们在base-layout中传入配置： ```html ``` 然后配置一下我们的logo和标题 ```html </div> </LayoutSider> ```
