---
title: ProLayout 布局组件
---

# ProLayout 布局组件

ProLayout 是页面布局组件，提供侧边栏、头部、内容区域等布局功能。

## 说明

ProLayout 提供了完整的页面布局方案，包括侧边栏菜单、顶部导航、内容区域等。支持侧边栏折叠、多级菜单、路由模式、响应式布局、常用菜单等功能。

## API

### Props

| 参数                    | 说明                                       | 类型               | 默认值             |
| ----------------------- | ------------------------------------------ | ------------------ | ------------------ |
| showSider               | 是否显示侧边栏                             | `Boolean`          | `true`             |
| siderWidth              | 侧边栏宽度                                 | `String`           | `'180px'`          |
| siderCollapsedWidth     | 侧边栏折叠宽度                             | `String`           | `'64px'`           |
| fixedHeader             | 是否固定头部                               | `Boolean`          | `true`             |
| collapsed               | 是否折叠（支持 v-model）                   | `Boolean`          | `true`             |
| showCollapse            | 是否显示折叠按钮                           | `Boolean`          | `true`             |
| showLogo                | 是否显示 Logo                              | `Boolean`          | `true`             |
| logo                    | Logo 图片（字符串路径或对象）              | `String \| Object` | -                  |
| title                   | 标题                                       | `String`           | `'Pro Layout'`     |
| menuItems               | 菜单项                                     | `Array`            | `[]`               |
| topMenuItems            | 顶部菜单项                                 | `Array`            | `[]`               |
| activeMenu              | 当前激活的菜单                             | `String`           | -                  |
| menuCollapseTransition  | 菜单折叠动画                               | `Boolean`          | `true`             |
| menuUniqueOpened        | 是否只保持一个子菜单的展开                 | `Boolean`          | `true`             |
| menuMode                | 菜单模式                                   | `String`           | `'vertical'`       |
| menuRouter              | 是否使用 vue-router 的模式                 | `Boolean`          | `true`             |
| menuProps               | 菜单属性                                   | `Object`           | `{}`               |
| showHeader              | 是否显示头部                               | `Boolean`          | `true`             |
| headerHeight            | 头部高度                                   | `String`           | `'60px'`           |
| showFooter              | 是否显示页脚                               | `Boolean`          | `false`            |
| footerHeight            | 页脚高度                                   | `String`           | `'60px'`           |
| responsive              | 是否启用响应式布局                         | `Boolean`          | `true`             |
| breakpoint              | 响应式断点（屏幕宽度小于此值时视为移动端） | `Number`           | `768`              |
| showMenuSearch          | 是否显示菜单搜索框                         | `Boolean`          | `true`             |
| menuSearchPlaceholder   | 菜单搜索框占位符                           | `String`           | `'请输入菜单名称'` |
| showCommonMenus         | 是否显示常用菜单                           | `Boolean`          | `true`             |
| commonMenusMax          | 常用菜单最大数量                           | `Number`           | `5`                |
| showLogoInHeader        | 是否在头部显示 Logo                        | `Boolean`          | `true`             |
| showTopMenu             | 是否显示顶部菜单                           | `Boolean`          | `true`             |
| showHeaderSearch        | 是否显示头部搜索框                         | `Boolean`          | `true`             |
| headerSearchPlaceholder | 头部搜索框占位符                           | `String`           | `'输入客户名称'`   |
| showPhoneIcon           | 是否显示电话图标                           | `Boolean`          | `true`             |
| showBellIcon            | 是否显示通知图标                           | `Boolean`          | `true`             |
| showTagsView            | 是否显示 TagsView                          | `Boolean`          | `true`             |
| tagsViewHeight          | TagsView 高度                              | `String`           | `'40px'`           |

### Logo 配置

Logo 支持两种格式：

1. **字符串格式**：直接传入图片路径

```javascript
logo: 'https://example.com/logo.png';
```

2. **对象格式**：包含 `src` 和 `size` 属性

```javascript
logo: {
    src: 'https://example.com/logo.png',
    size: { width: 129, height: 22 } // 或数字（宽高相同）、字符串（如 '24px'）
}
```

### MenuItem 配置

菜单项支持两种类型：

1. **常用菜单**（`type: 'common'`）：

```javascript
{
    type: 'common',
    title: '常用菜单',
    children: [
        {
            key: 'common-home',
            path: '/home',
            title: '首页',
        },
        // ...
    ]
}
```

2. **导航菜单**（`type: 'menu'`）：

```javascript
{
    type: 'menu',
    title: '导航菜单',
    children: [
        {
            key: 'home',
            path: '/home',
            title: '首页',
            icon: HomeIcon, // 可选
        },
        {
            key: 'parent',
            path: '/parent',
            title: '父菜单',
            children: [ // 支持多级嵌套
                {
                    key: 'child',
                    path: '/parent/child',
                    title: '子菜单',
                },
            ],
        },
    ]
}
```

**MenuItem 属性：**

| 参数     | 说明                 | 类型              | 默认值 |
| -------- | -------------------- | ----------------- | ------ |
| key      | 唯一标识             | `String`          | -      |
| path     | 路由路径             | `String`          | -      |
| title    | 菜单标题             | `String`          | -      |
| label    | 标签（用于顶部菜单） | `String`          | -      |
| icon     | 菜单图标             | `Component`       | -      |
| children | 子菜单               | `Array<MenuItem>` | -      |

### TopMenuItem 配置

顶部菜单项配置：

```javascript
{
    key: 'home',
    path: '/home',
    title: '首页',
    label: '首页', // 显示文本
    children: [ // 支持下拉菜单
        {
            key: 'child',
            path: '/child',
            title: '子菜单',
            label: '子菜单',
        },
    ],
}
```

### Events

| 事件名             | 说明                               | 参数                   |
| ------------------ | ---------------------------------- | ---------------------- |
| update:collapsed   | 折叠状态更新时触发（支持 v-model） | `(collapsed: boolean)` |
| collapse-change    | 侧边栏折叠状态变化时触发           | `(collapsed: boolean)` |
| logo-click         | Logo 点击时触发                    | -                      |
| breadcrumb-click   | 面包屑点击时触发                   | `(path: string)`       |
| breadcrumb-close   | 面包屑关闭时触发                   | `(path: string)`       |
| phone-click        | 电话图标点击时触发                 | -                      |
| bell-click         | 通知图标点击时触发                 | -                      |
| user-command       | 用户菜单命令触发                   | `(command: string)`    |
| menu-search        | 菜单搜索时触发                     | `(keyword: string)`    |
| menu-search-click  | 菜单搜索结果点击时触发             | `(item: MenuItem)`     |
| header-search      | 头部搜索时触发                     | `(keyword: string)`    |
| tag-refresh        | TagsView 刷新时触发                | `(path: string)`       |
| tag-close          | TagsView 关闭时触发                | `(path: string)`       |
| common-menu-delete | 常用菜单删除时触发                 | `(key: string)`        |

### Slots

| 插槽名       | 说明         |
| ------------ | ------------ |
| header-right | 头部右侧内容 |
| footer       | 页脚内容     |
| default      | 内容区域     |

## 示例

:::example

pro-layout/basic

:::