手摸手创建一个 Vue + Ts 项目（六） —— 完善布局

前言

拖更了好久，在这里给大家说声抱歉。主要还是公司要求加班，每天的精力都被消耗殆尽，特别作者是一个业余的前端开发，写这个系列的文章，时间也要长一些。

同时，在写该章的时候，发现了前面的一个问题，在 BasicLayout.vue 的 article 标签上，少添加了一个属性：flex，这里代码和文章已经进行了修改。下面言归正传。

通过前面的章节，我们实现了一个基本的布局，由左侧菜单栏和右侧内容栏组成，并实现了左侧菜单栏的基本功能。

实现之后的效果呢，如下图所示：

这一篇，来针对布局，做一下其他功能的完善，例如右侧Header等等。

添加Header栏

添加 Header 栏比较简单，打开 BasicLayout.vue 文件，在 article 标签中，修改如下：

<article flex-1 flex-col overflow-hidden>
  <header bg-blue-600 h-12>
    <div>
      <!-- 这是 Header 栏 -->
    </div>
  </header>
	<!-- section .... -->
</article>

添加一个 Header，简单为其添加一个背景和高度，刷新页面，基本的效果已经实现啦，效果如下：

完成之后，在 Header 右侧，添加一个头像按钮，修改代码如下：

<article flex-1 flex-col overflow-hidden>
  <header border-b h-12 leading-none>
    <n-space align="center" justify="end" :wrap="false" h-12 px-3>
      <n-avatar
        style="align-content: center"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </n-space>
  </header>
	<!-- section -->
</article>

折叠菜单栏

NaiveUI 的 Menu 组件，提供了很方便的折叠功能，只需要控制折叠属性「collapsed」就可以了。所以，在使用菜单的地方， 添加该属性的值。修改 BasicLayout.vue 的代码：

<script setup lang="ts">
import { ref } from 'vue'
const collapsed = ref(false)
</script>

<template>
  <n-layout has-sider wh-full>
    <n-layout-sider
      bordered
      collapse-mode="width"
      :width="240"
      :native-scrollbar="false"
      :collapsed="collapsed"
      :collapsed-width="64"
    >
      <n-scrollbar>
        <n-menu
          :options="menuOptions"
          :expanded-keys="expandKeys"
          :on-update:expanded-keys="updateExpandKeys"
          :value="currentMenu"
          :on-update:value="updateValue"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          collapsed-mode="width"
        ></n-menu>
      </n-scrollbar>
    </n-layout-sider>
  </n-layout>
</template>

首先，定义一个 collapsed 属性，用于控制左侧菜单的折叠，分别在 NLayoutSider 和 NMenu 组件中，使用该折叠属性，并且定义这些的宽度等信息。之后，在 Header 中，定义一个图标，用于控制左侧菜单的折叠：

<header border-b h-12 leading-none>
  <n-space align="center" justify="space-between" :wrap="false" h-12 px-3>
    <n-icon size="24" cursor-pointer @click="collapsed = !collapsed">
      <PanelLeftExpand20Regular v-if="collapsed" />
      <PanelRightExpand20Regular v-else />
    </n-icon>
    <!-- ...... -->
  </n-space>
</header>

未折叠时效果如下：

已折叠时效果如下：

全局化配置

NaiveUI 提供了一个全局化配置组件（NConfigProvider）组件，可以方便地全局化配置内部组件的主题、语言和组件。首先，新建一个全局化配置组件页面：

• components/AppProvider/AppProvider.vue

<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" wh-full>
    <slot name="default" />
  </n-config-provider>
</template>

<script setup lang="ts">
import { zhCN, dateZhCN } from "naive-ui";
</script>
<style scoped></style>

在这个文件中，使用了 NConfigProvider 组件，并配置语言和日期语言为中文。

在 App.vue 中使用该组件页面：

<template>
	<AppProvider>
		<router-view></router-view>
	</AppProvider>
</template>

封装内容区域容器

在主内容区域，一直没有进行样式调整过，个人认为呢，在该区域时，可以封装几个通用的样式组件，当需要不同的样式时，加载不同的组件页面即可。

例如，这里封装几个不同需求的页面组件，从最基础的开始。

使用 SASS

SASS 是一款 CSS 的预处理语言，它在 CSS 语法的基础上增加了变量「variables」、嵌套「nested rule」、混合「mixins」、导入「inline imports」等高级功能。

使用 SASS 的方式比较简单，安装后，将样式文件定义为 .scss，即可使用相关语法。

首先，第一步，安装 SASS ：

pnpm i SASS -D

将前一章节定义的 index.css 重命名为 index.scss，相应 main.ts 中也进行重命名。

自定义滚动条

这里用 SASS 来实现一个自定义滚动条，美化下浏览器默认的滚动条样式，且支持组件内部滚动。

在 styles 文件夹下，增加 scroll.scss 样式文件，添加自定义滚动条样式：

/* 自定义滚动条样式 */
.cus-scroll {
  overflow: auto;
  &::-webkit-scrollbar {
    width: 8;
    height: 8px;
  }
}
.cus-scroll-x {
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }
}
.cus-scroll-y {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 8px;
    height: 0;
  }
}
.cus-scroll,
.cus-scroll-x,
.cus-scroll-y {
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }
  }
}

在 index.scss 中导入该文件：

@import 'scroll.scss';

基础布局

在 components 文件夹下，创建 Page 文件夹，在该文件夹下，创建 AppPage.vue 文件夹，表示一个最基础的页面组件。代码如下：

<script setup lang="ts"></script>

<template>
  <transition name="fade-slide" mode="out-in" appear>
    <section wh-full flex flex-col class="bg-[#f5f6fb] cus-scroll-y">
      <slot />
    </section>
  </transition>
</template>

<style scoped></style>

这个页面代码非常的简单，添加了动画效果，设置了高度、宽度、背景等，并且设置组件内部滚动。

这里，默认的过渡动画效果，不是非常满意，可以在 index.scss 中，进行修改：

/** ...... */

/* router view transition fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.4s
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

自定义布局1

这里基于上面的基础布局，可以实现一个简单的自定义布局，例如如下：

• components/Page/CommonPage.vue

<template>
  <app-page>
    <section flex-1 bg-light-50 m-2 p-2 rounded-md>
      <slot />
    </section>
  </app-page>
</template>

<script setup lang="ts"></script>

<style scoped></style>

在这个布局中，设置了边距、内边距、背景颜色和圆角等属性。

在使用时，非常简单，直接使用 common-page 标签即可，例如：

• views/table/index.vue：

<script setup lang="ts"></script>

<template>
  <common-page>
    <div>
      <h3>Table</h3>
      <router-link to="/dashboard">Go to Dashboard</router-link>
    </div>
  </common-page>
</template>

<style scoped></style>

实现效果如下：

结语

这一章节，完善了下布局，添加了 Header 栏，并实现了菜单折叠，头像展示的功能。还针对右侧内容栏，进行了最简单的样式封装，到此为止，基本实现了一个最简易的布局，可能有的开发者，还需要面包屑、多标签组件等等功能，之所以没有提及，是因为项目的初衷，就是最少的代码，实现最基本的功能，这种非基本的功能，会在后面单独讲一下，并将代码提交到新的分支。

我是「代码笔耕」，致力于打造高效简洁、稳定可靠代码的后端开发。 由于不是专业的前端开发，也是通过写这一系列的文章，来提升巩固下自己的水平。 本文可能存在纰漏或错误，如有问题欢迎指正，感谢您阅读这篇文章，如果觉得还行的话，不要忘记点赞、评论、收藏喔！ 最后欢迎大家关注我的公众号「代码笔耕」和开源项目：easii (easii) - Gitee.com