`Layout` 组件文档

概述

Layout 组件是一个用于页面布局的容器组件，它支持灵活的插槽系统，可以轻松地为页面创建常见的布局结构。通过该组件，你可以实现如顶部导航、侧边栏、内容区域、底部等布局元素，并且通过自定义样式或传递插槽内容来灵活调整页面布局。

预览

◀

侧边栏内容

主体内容区域

基本使用

<template>
  <SeLayout v-model:collapsed="collapsed">
    <template #header>
      <div>顶部导航栏内容</div>
    </template>
    <template #sider>
      <div>侧边栏内容</div>
    </template>
    <template #content>
      <div>主体内容区域</div>
    </template>
    <template #footer>
      <div>底部区域</div>
    </template>
  </SeLayout>
</template>

<script setup>
import { ref } from 'vue';


const collapsed = ref(false); // 控制侧边栏收缩状态
</script>

功能

侧边栏收缩与展开：

通过点击收缩/展开按钮可以切换侧边栏的宽度，默认收缩状态。
收缩时侧边栏的宽度为 24px，展开时为 200px。
侧边栏的显示/隐藏是通过修改 width 和 left 来实现的，支持平滑过渡效果。

当前项样式控制：

在收缩状态时，显示一个收缩按钮，点击按钮时会展开侧边栏。
展开状态时，侧边栏默认内容宽度为 200px。

可插拔内容区域：

主体内容区域、头部和底部区域可以通过插槽 (slots) 进行自定义。
slots.sider 插槽用于自定义侧边栏内容。
slots.header 插槽用于自定义顶部导航栏。
slots.content 插槽用于自定义主体内容区域。
slots.footer 插槽用于自定义底部区域。

收缩按钮：

只有在侧边栏收缩时，才会显示一个用于切换展开状态的按钮，按钮位于侧边栏的最左边。
当侧边栏展开时，按钮显示为“◀”，收缩时按钮显示为“▶”。

组件属性

属性	类型	默认值	说明
`collapsed`	`Boolean`	`true`	控制侧边栏是否处于收缩状态。

组件事件

事件名称	参数	说明
`update:collapsed`	`Boolean`	当侧边栏的收缩状态发生变化时，触发此事件，并传递新的收缩状态。

组件方法

toggleCollapsed：切换侧边栏的收缩与展开状态，并更新父组件的状态。

插槽

插槽名称	说明
`sider`	用于侧边栏的自定义内容。
`header`	用于顶部导航栏的自定义内容。
`content`	用于主体内容区域的自定义内容。
`footer`	用于底部区域的自定义内容。

使用示例

vue

<template>
  <SeLayout :collapsed="collapsed" @update:collapsed="handleCollapsedChange">
    <template #header>
      <div>自定义顶部导航栏</div>
    </template>

    <template #sider>
      <div>自定义侧边栏内容</div>
    </template>

    <template #content>
      <div>自定义主体内容区域</div>
    </template>

    <template #footer>
      <div>自定义底部区域</div>
    </template>
  </SeLayout>
</template>

<script setup>
import { ref } from 'vue';
import SeLayout from './SeLayout.vue';

const collapsed = ref(true); // 控制侧边栏收缩状态

const handleCollapsedChange = (newState) => {
  collapsed.value = newState;
};
</script>

样式

侧边栏是固定在页面左侧，具有平滑的收缩动画。
收缩时，主内容区域的 margin-left 会随侧边栏的宽度变化，以保持布局的一致性。
主体内容区域（layout-main）的左右间距会根据侧边栏的展开与收缩自动调整。

组件注意事项

收缩按钮：当侧边栏处于收缩状态时，收缩按钮会显示在侧边栏的左侧，并允许用户展开侧边栏。当侧边栏展开时，按钮会消失。
插槽使用：通过插槽可以非常灵活地自定义每个区域的内容，例如顶部导航栏、主体内容、底部区域等。
响应式设计：该组件提供的布局可以适应不同的屏幕大小，通过调整侧边栏的宽度和主内容区域的布局，适合不同的业务场景。

总结

seLayout 是一个灵活且功能强大的布局组件，可以帮助开发人员快速实现具有侧边栏收缩功能的页面。其可插拔的设计和动态样式控制，使得它可以轻松适配各种需求，适合用于后台管理系统、仪表盘以及其他需要侧边栏交互的应用场景。

Layout 组件文档 ​

概述 ​

预览 ​

功能 ​

组件属性 ​

组件事件 ​

组件方法 ​

插槽 ​

使用示例 ​

样式 ​

组件注意事项 ​

总结 ​