witLayoutFall 下落布局组件

witLayoutFall是一个基于 Element Plus 封装的下落布局组件，提供了完整的页面布局结构，包括下落式导航栏、头部导航、标签栏和主内容区域，支持灵活的布局配置和响应式设计。

用法实列

<template>
  <div>
    <!-- 基础用法 -->
    <witLayoutFall />
    
    <!-- 自定义配置 -->
    <witLayoutFall
      :collapse="false"
      :fixedHeader="true"
      :showTabs="true"
    />
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件会自动与系统集成
</script>

API

组件

属性名	类型	默认值	描述
collapse	[Boolean]	false	是否折叠侧边栏
fixedHeader	[Boolean]	true	是否固定头部导航和标签栏
showTabs	[Boolean]	true	是否显示标签栏

插槽

插槽名	描述
-	无插槽配置

事件

事件名	描述	参数
-	无直接暴露事件	-

功能特性

1. 完整布局结构

组件提供了完整的页面布局，包括：

• wit-fall-bar：下落式导航栏，用于系统主要功能导航
• wit-nav：头部导航，包含用户信息、通知等
• wit-tabs：标签栏，管理已打开的页面标签
• wit-app-main：主内容区域，用于显示当前页面内容

2. 灵活的布局配置

支持通过属性配置布局的显示状态：

• 可控制侧边栏的折叠状态
• 可选择是否固定头部导航
• 可配置是否显示标签栏

3. 下落式导航设计

采用独特的下落式导航设计，提供了新颖的导航体验，节省页面空间的同时保持良好的可用性。

4. 响应式设计

组件具备响应式设计能力，可根据不同的布局状态自动调整主内容区域的宽度和位置。

实现原理

组件通过组合多个子组件构建完整的下落布局，并根据配置动态调整布局结构：

1. 根据collapse属性控制侧边栏折叠状态，调整主内容区域宽度
2. 根据fixedHeader属性控制头部导航是否固定
3. 根据showTabs属性控制标签栏的显示/隐藏

样式结构

组件采用了模块化的样式设计：

• 主容器：wit-layout-fall
• 主内容区域：wit-main
• 头部区域：wit-layout-header

根据不同的配置，组件会动态添加相应的类名，如：

• fixed：固定头部状态
• no-tabs-bar：无标签栏状态
• is-collapse-main：侧边栏折叠状态
• is-no-tabs：无标签栏状态
• fixed-header：固定头部状态

当侧边栏折叠时，主内容区域会自动调整宽度，以适应不同的布局状态。

TIP

1. 组件使用 wit-fall-bar 作为导航组件，提供了独特的下落式导航体验
2. 可以通过修改 collapse 属性来控制侧边栏的折叠状态
3. 组件的响应式设计会根据侧边栏折叠状态自动调整主内容区域宽度
4. 可根据需求灵活配置是否显示标签栏和固定头部导航