ExUI

Appearance

Layout 布局 ​

用于页面整体布局的组件，提供 Header、Sider、Content、Footer 等子组件。

基础用法 ​

最基本的页面布局结构。

Content
Footer
vue
<template>
  <ex-layout>
    <ex-header>Header</ex-header>
    <ex-content>Content</ex-content>
    <ex-footer>Footer</ex-footer>
  </ex-layout>
</template>

带侧边栏 ​

经典的侧边栏布局，侧边栏可以在左侧或右侧。

Content
Footer
vue
<template>
  <ex-layout has-sider>
    <ex-sider>Sider</ex-sider>
    <ex-layout>
      <ex-header>Header</ex-header>
      <ex-content>Content</ex-content>
      <ex-footer>Footer</ex-footer>
    </ex-layout>
  </ex-layout>
</template>

可收起侧边栏 ​

侧边栏支持收起功能，适合需要更多内容空间的场景。

Content
vue
<template>
  <ex-layout has-sider>
    <ex-sider
      v-model:collapsed="collapsed"
      :width="256"
      :collapsed-width="80"
      collapsible
    >
      <div v-if="!collapsed">完整菜单</div>
      <div v-else>图标</div>
    </ex-sider>
    <ex-layout>
      <ex-header>Header</ex-header>
      <ex-content>Content</ex-content>
      <ex-footer>Footer</ex-footer>
    </ex-layout>
  </ex-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const collapsed = ref(false);
</script>

霓虹边框效果 ​

为 Header、Sider、Footer 添加霓虹发光边框，增强游戏科技感。

Content
Footer
vue
<template>
  <ex-layout has-sider>
    <ex-sider neon-border>Sider</ex-sider>
    <ex-layout>
      <ex-header neon-border>Header</ex-header>
      <ex-content>Content</ex-content>
      <ex-footer neon-border>Footer</ex-footer>
    </ex-layout>
  </ex-layout>
</template>

赛博朋克风格内容区 ​

Content 组件支持背景网格和扫描线效果，营造赛博朋克氛围。

游戏内容区

带有网格背景和扫描线效果

Footer
vue
<template>
  <ex-layout>
    <ex-header>Header</ex-header>
    <ex-content grid scanline>
      <h1>游戏内容区</h1>
      <p>带有网格背景和扫描线效果</p>
    </ex-content>
    <ex-footer>Footer</ex-footer>
  </ex-layout>
</template>

Header 插槽布局 ​

Header 支持左中右三栏布局。

Content
vue
<template>
  <ex-layout>
    <ex-header>
      <template #left>
        <img src="/logo.png" alt="Logo" />
        <span>ExUI</span>
      </template>
      
      <template #center>
        <nav>
          <a href="#">首页</a>
          <a href="#">组件</a>
          <a href="#">文档</a>
        </nav>
      </template>
      
      <template #right>
        <ex-button type="primary">登录</ex-button>
      </template>
    </ex-header>
    <ex-content>Content</ex-content>
  </ex-layout>
</template>

响应式断点 ​

Sider 组件支持响应式断点，当屏幕宽度小于指定断点时自动收起侧边栏，并显示遮罩层。

当屏幕宽度小于 992px 时

侧边栏会自动收起并显示遮罩层

vue
<template>
  <ex-layout has-sider>
    <ex-sider
      v-model:collapsed="collapsed"
      collapsible
      breakpoint="md"
      @breakpoint="handleBreakpoint"
    >
      侧边栏内容
    </ex-sider>
    <ex-layout>
      <ex-content>Content</ex-content>
    </ex-layout>
  </ex-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const collapsed = ref(false);

const handleBreakpoint = (broken: boolean) => {
  console.log('断点触发:', broken);
};
</script>

断点说明 ​

断点说明触发条件
xs超小屏幕屏幕宽度 < 480px
sm小屏幕屏幕宽度 < 768px
md中等屏幕屏幕宽度 < 1024px
lg大屏幕屏幕宽度 < 1280px
xl超大屏幕屏幕宽度 < 1536px
2xl极大屏幕屏幕宽度 < 1920px

Container 容器 ​

Container 组件用于限制内容宽度，提供响应式的容器布局。

响应式容器

容器宽度会根据屏幕大小自动调整

vue
<template>
  <ex-container>
    <ex-layout>
      <ex-header>Header</ex-header>
      <ex-content>Content</ex-content>
      <ex-footer>Footer</ex-footer>
    </ex-layout>
  </ex-container>
</template>

流式容器 ​

使用 fluid 属性创建 100% 宽度的容器。

流式容器（100%宽度）

vue
<template>
  <ex-container fluid>
    <ex-layout>
      <!-- 内容会占满整个宽度 -->
    </ex-layout>
  </ex-container>
</template>

固定尺寸容器 ​

使用 size 属性设置固定的容器尺寸。

中等尺寸容器 (max-width: 720px)

vue
<template>
  <!-- 小容器 -->
  <ex-container size="sm">
    <ex-layout>...</ex-layout>
  </ex-container>

  <!-- 中等容器 -->
  <ex-container size="md">
    <ex-layout>...</ex-layout>
  </ex-container>

  <!-- 大容器 -->
  <ex-container size="lg">
    <ex-layout>...</ex-layout>
  </ex-container>
</template>

Container 尺寸对照表 ​

尺寸最大宽度适用场景
sm448px窄内容，如登录表单
md720px中等内容，如文章阅读
lg960px标准内容，如后台管理
xl1216px宽内容，如数据展示
2xl1472px超宽内容，如大屏应用

动画配置 ​

Sider 组件支持自定义动画过渡时长。

点击侧边栏底部按钮

体验慢速动画效果

vue
<template>
  <ex-layout has-sider>
    <!-- 快速动画 (200ms) -->
    <ex-sider :transition-duration="200" collapsible>
      Menu
    </ex-sider>

    <!-- 默认动画 (300ms) -->
    <ex-sider collapsible>
      Menu
    </ex-sider>

    <!-- 慢速动画 (500ms) -->
    <ex-sider :transition-duration="500" collapsible>
      Menu
    </ex-sider>

    <!-- 无动画 -->
    <ex-sider :transition-duration="0" collapsible>
      Menu
    </ex-sider>
  </ex-layout>
</template>

全局配置支持 ​

Layout 组件支持通过 ConfigProvider 进行全局配置。

vue
<template>
  <ex-config-provider :neon-effect="true" :animation="true">
    <ex-layout has-sider>
      <!-- 当 neon-effect 为 true 时，所有组件默认显示霓虹边框 -->
      <ex-sider>Sider</ex-sider>
      <ex-layout>
        <ex-header>Header</ex-header>
        <ex-content>Content</ex-content>
        <ex-footer>Footer</ex-footer>
      </ex-layout>
    </ex-layout>
  </ex-config-provider>
</template>

支持的全局配置 ​

  • neon-effect: 全局霓虹效果开关，当设置为 true 时，Header、Sider、Footer 默认显示霓虹边框
  • animation: 全局动画开关，当设置为 false 时，禁用所有过渡动画
  • locale: 国际化语言设置，支持 zh-CN 和 en-US

键盘导航 ​

Sider 组件的触发器支持完整的键盘导航。

键盘快捷键 ​

按键功能
Tab聚焦到触发器按钮
Enter切换侧边栏收起状态
Space切换侧边栏收起状态

无障碍支持 ​

Layout 组件完全支持无障碍访问（WCAG 2.1 AA 标准）：

  • ✅ 使用语义化 HTML 标签（<header>, <aside>, <main>, <footer>）
  • ✅ 提供完整的 ARIA 属性（role, aria-label, tabindex）
  • ✅ 支持键盘导航
  • ✅ 支持屏幕阅读器
  • ✅ 国际化的无障碍标签

API ​

Layout Props ​

参数说明类型默认值
has-sider是否包含侧边栏booleanfalse
direction布局方向'horizontal' / 'vertical''vertical'
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—

Layout Methods ​

方法名说明参数返回值
getElement获取 DOM 元素—HTMLElement | null

Header Props ​

参数说明类型默认值
height高度string / number64
fixed是否固定定位booleanfalse
neon-border是否显示霓虹边框（未设置时使用全局配置）booleanundefined
blur是否显示背景模糊booleanfalse
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—

Header Slots ​

插槽名说明
default头部内容（当没有使用具名插槽时显示）
left左侧内容
center中间内容
right右侧内容

Header Methods ​

方法名说明参数返回值
getElement获取 DOM 元素—HTMLElement | null

Sider Props ​

参数说明类型默认值
width宽度string / number256
collapsed-width收起时的宽度string / number80
collapsed / v-model:collapsed是否收起booleanfalse
collapsible是否可收起booleanfalse
trigger触发器位置'top' / 'bottom' / null'bottom'
position侧边栏位置'left' / 'right''left'
neon-border是否显示霓虹边框（未设置时使用全局配置）booleanundefined
blur是否显示背景模糊booleanfalse
breakpoint响应式断点'xs' / 'sm' / 'md' / 'lg' / 'xl' / '2xl'—
transition-duration动画过渡时长（毫秒）number300
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—

Sider Events ​

事件名说明回调参数
update:collapsed收起状态变化(value: boolean)
collapse收起状态变化（兼容）(collapsed: boolean, type: 'clickTrigger' / 'responsive')
breakpoint断点触发(broken: boolean)

Sider Slots ​

插槽名说明参数
default侧边栏内容—
trigger自定义触发器

Sider Methods ​

方法名说明参数返回值
toggle切换收起状态—void
getElement获取 DOM 元素—HTMLElement | null

Content Props ​

参数说明类型默认值
grid是否显示背景网格booleanfalse
scanline是否显示扫描线效果booleanfalse
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—

Content Methods ​

方法名说明参数返回值
getElement获取 DOM 元素—HTMLElement | null
参数说明类型默认值
height高度string / number64
fixed是否固定定位booleanfalse
neon-border是否显示霓虹边框（未设置时使用全局配置）booleanundefined
blur是否显示背景模糊booleanfalse
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—
插槽名说明
default底部内容（当没有使用具名插槽时显示）
left左侧内容
center中间内容
right右侧内容
方法名说明参数返回值
getElement获取 DOM 元素—HTMLElement | null

Container Props ​

参数说明类型默认值
fluid是否为流式容器（100%宽度）booleanfalse
size固定尺寸'sm' / 'md' / 'lg' / 'xl' / '2xl'—
class自定义类名string / string[] / object—
style自定义样式CSSProperties / string—

Container Methods ​

方法名说明参数返回值
getElement获取 DOM 元素—HTMLElement | null

性能优化 ​

Layout 组件已进行多项性能优化：

1. 响应式断点防抖 ​

Sider 组件的响应式断点监听使用了 150ms 防抖，避免窗口调整时频繁触发：

typescript
// 自动防抖优化，无需手动配置
<ex-sider breakpoint="md" collapsible>
  Menu
</ex-sider>

2. 事件监听器自动清理 ​

所有事件监听器在组件卸载时自动清理，防止内存泄漏。

3. 计算属性缓存 ​

使用 Vue 的 computed 缓存计算结果，避免不必要的重复计算。

4. CSS 变量动画 ​

使用 CSS 变量控制动画时长，性能优于 JavaScript 动画：

scss
transition: all var(--ex-sider-transition-duration, 300ms);