15 混合布局开发(下) - udo-bit/naive_admin_pro GitHub Wiki

目标

完成侧边栏布局

image.png

调整布局样式

由于我们的侧边栏的布局颜色是白色，但是我们的背景也是白色，所以开发起来会不太方便，接下来我们先调整一下整个布局的颜色。

创建样式文件夹

在assets目录下创建一个styles的文件用于存放我们的样式信息。 然后再styles中创建一个index.css文件作为样式的入口。 我们在定义一个vars.css用于存放我们的css-var的全局变量。 我们在var.css中来写公共变量如下：

html{
  --pro-admin-layout-content-bg: #f0f2f5;
}

在index.css中导出

@import "vars.css";

在main.ts导入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import '@unocss/reset/tailwind.css'
+ import '~/assets/styles/index.css'
import 'uno.css'
import router from '~/routes'

// console.log(import.meta.env.VITE_APP_BASE)

const pinia = createPinia()

const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)

const app = createApp(App)

app.use(router)
app.use(pinia)

app.mount('#app')

在mix-layout/index.vue中，改造内容布局

<n-layout-content content-style="padding: 24px;" style="--n-color: var(--pro-admin-layout-content-bg)">
  <slot />
</n-layout-content>

封装layout-content

后续我们增加其他布局的时候，我们也会用到n-layout-content所以我们不能每次都处理，我们处理一次后直接封装成一个组件，方便我们后续的使用。 我们在common目录下创建一个layout-content.vue的文件。

<script lang="ts" setup>
const attrs = useAttrs()
</script>

<template>
  <n-layout-content v-bind="attrs" style="--n-color: var(--pro-admin-layout-content-bg)">
    <slot />
  </n-layout-content>
</template>

改造common

我们在common目录下增加一个index.ts文件，然后我们从index.ts中将我们组件进行导出，方便我们后续扩展组件引用。

import Title from './title.vue'
import Logo from './logo.vue'
import LayoutContent from './layout-content.vue'

export {
  Title,
  Logo,
  LayoutContent,
}

然后在mix-layout/index.vue中调整组件导入： 将

import Logo from '~/layouts/common/logo.vue'
import Title from '~/layouts/common/title.vue'

改为：

import { Logo,LayoutContent,Title } from '~/layouts/common'

然后我们将下面的n-layout-content替换成LayoutContent即可

侧边栏开发

我们的侧边栏本身也会在多种布局中使用，所以我们也需要将它封装到我们的layouts的公共组件中。 在common中创建一个layout-sider.vue的文件。

<script lang="ts" setup>
const attrs = useAttrs()
</script>

<template>
  <n-layout-sider v-bind="attrs">
    <slot />
  </n-layout-sider>
</template>

替换mix-layout/index.vue中的n-layout-sider为LayoutSider

全局主题配置

接下来我们需要在全局配置一下默认情况下我们的侧边栏的宽度，以及收起的情况下我们侧边栏的宽度。 在config/layout-theme.ts中：

import logo from '~/assets/vue.svg'
export interface LayoutTheme {
  title?: string
  layout: 'mix' | 'side' | 'top'
  headerHeight: number
  logo?: string
  siderWidth: number // 侧边栏宽度
  siderCollapsedWidth: number // 侧边栏收起的宽度
  showSiderTrigger: boolean | 'bar' | 'arrow-circle' // 侧边栏默认的触发方式
}

export const layoutThemeConfig: LayoutTheme = {
  title: 'Naive Admin Pro',
  layout: 'mix',
  headerHeight: 48,
  logo,
  siderWidth: 240,
  siderCollapsedWidth: 48,
  showSiderTrigger: 'bar',
}

在mix-layout中定义属性接收

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,
})

然后传给我们的LayoutSider�组件。

<LayoutSider
  :collapsed-width="siderCollapsedWidth"
  :width="siderWidth"
  :show-trigger="showSiderTrigger"
  content-style="padding: 24px;"
  >
     海淀桥
</LayoutSider>

最后我们在base-layout中配置查看效果：

<MixLayout
  v-if="layout.layout === 'mix'"
  :logo="layout.logo"
  :title="layout.title"
  :show-sider-trigger="layout.showSiderTrigger"
  :sider-width="layout.siderWidth"
  :sider-collapsed-width="layout.siderCollapsedWidth"
  >
  <template #headerRight>
    <div>
      测试右侧插槽
    </div>
  </template>
  <router-view />
</MixLayout>

最后我们发现，侧边栏收起默认情况下，没有改变实际的宽度，只是移动了它的位置，这不是我们想要的效果，所以我们在layout-sider.vue中更改collapse-mode属性为width，后测试效果，文字不会被收起看不到了。

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