13 混合布局开发(上) - udo-bit/naive_admin_pro GitHub Wiki

目标

  1. 创建混合布局文件
  2. 完成基础的样式配置

混合布局模式

我们这里所说的混合布局模式，就是顶部通栏加上侧边栏，就叫做混合布局模式，我们通过一张图来看一下。 Page 1.png

  1. Header贯穿整个页面
  2. 侧边栏在顶部的下面并且高度撑开
  3. 其余部分为内容部分

创建混合布局文件夹

在layouts的目录中创建一个混合布局的文件夹mix-layout然后再创建一个index.vue文件开发我们的混合布局部分。 我们到naive-ui的官网去看一下有没有符合我们现在需求的demo image.png 这个demo比我们的布局多了一个底部的通栏，所以这个布局可能比较适合我们现在的混合模式，所以我们直接拷贝这部分的代码进行改造。

<script lang="ts" setup>

</script>

<template>
  <n-layout>
    <n-layout-header>颐和园路</n-layout-header>
    <n-layout has-sider>
      <n-layout-sider content-style="padding: 24px;">
        海淀桥
      </n-layout-sider>
      <n-layout-content content-style="padding: 24px;">
        <slot />
      </n-layout-content>
    </n-layout>
    <n-layout-footer>成府路</n-layout-footer>
  </n-layout>
</template>

<style scoped>
.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);
}
</style>

在base-layout中使用

我们之前已经在配置过了一些基础的布局通过我们的状态管理器，那么我们这里就使用一下我们的状态管理器。

<script lang="ts" setup>
import MixLayout from '../mix-layout/index.vue'
const appStore = useAppStore()
const { layout } = storeToRefs(appStore)
</script>

<template>
  <MixLayout v-if="layout.layout === 'mix'">
    <router-view />
  </MixLayout>
</template>

<style scoped>

</style>

查看是否有效果，我们可以看到我们的布局是正常生效的，接下来我们就来改造一下这一部分的布局逻辑。

配置属性和样式

接下来我们来编写我们的样式部分。如下：

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  headerHeight?: number
}>(), {
  headerHeight: 48,
})
const headerHeightVar = computed(() => `${props.headerHeight}px`)
const contentHeightVar = computed(() => `calc(100vh - ${props.headerHeight}px)`)
</script>

<template>
  <n-layout class="h-screen">
    <n-layout-header class="pro-admin-mix-layout-header">
      颐和园路
    </n-layout-header>
    <n-layout has-sider class="pro-admin-mix-layout-content">
      <n-layout-sider content-style="padding: 24px;">
        海淀桥
      </n-layout-sider>
      <n-layout-content content-style="padding: 24px;">
        <slot />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped>
.pro-admin-mix-layout-header{
  height: v-bind(headerHeightVar);
}
.pro-admin-mix-layout-content{
  height: v-bind(contentHeightVar);
}
.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);
}
</style>

实现的效果： image.png

⚠️ **GitHub.com Fallback** ⚠️