Vue.js前端框架入门教程

TinyVue Container 容器布局组件使用指南

前言

在中后台管理系统的布局中，顶部导航栏、左侧菜单、主内容区以及底部状态栏几乎成为标配结构。无论项目规模如何，这套布局都是绕不开的基础。TinyVue 的 Container 组件专为此需求设计，内置 5 种预置版型，只需一行配置即可切换整体布局结构，无需手动编写 Flex 或 Grid 布局的繁琐代码。

组件介绍

是 TinyVue 提供的容器布局组件，依赖包为 @opentiny/vue。通过 pattern 属性选择预置版型，配合 header、aside、default、footer 四个插槽填充各区域内容，可快速搭建页面骨架。

核心特性

• 5 种预置版型：default、classic、simple、fashion、legend
• 4 个命名插槽：header、aside、default（主内容）、footer
• 尺寸可配：header-height、footer-height、aside-width 能精确控制各区域尺寸
• 主区域自适应：main 区域会自动填充剩余空间

基本用法

安装与引入

import { TinyContainer } from '@opentiny/vue'

版型切换

通过 pattern 属性选择版型，版型决定了各插槽是否显示以及显示位置：

五种版型详解

版型	Header	Aside	Main	Footer	适用场景
default	顶部全宽	左侧	自适应	底部全宽	标准后台布局
classic	顶部全宽	左侧	自适应	-	无底栏的经典布局
simple	顶部全宽	-	自适应	-	无侧边的简约布局
fashion	-	左侧	自适应	底部全宽	无顶栏的布局
legend	顶部全宽	左侧	自适应	底部全宽	四区域完整布局

自定义宽高

通过 header-height、footer-height、aside-width 精确控制各区域尺寸，主内容区自动填充剩余空间：

尺寸属性说明

属性	默认值	说明
header-height	60	头部区域高度（px）
footer-height	60	底部区域高度（px）
aside-width	200	侧边区域宽度（px）

插槽详解

Container 提供 4 个插槽，分别对应布局的 4 个区域：

header 插槽

顶部区域，通常放置导航栏、Logo、用户信息等：

aside 插槽

左侧区域，通常放置侧边菜单：

default 插槽（主内容区）

默认插槽，放置页面主体内容：

footer 插槽

底部区域，通常放置版权信息、状态栏等：

实战示例：后台管理布局

API 参考

Props

属性名	类型	默认值	说明
aside-width	number | string	200	左侧区域宽度
footer-height	number | string	60	底部区域高度
header-height	number | string	60	头部区域高度
pattern	'default' | 'simple' | 'legend' | 'classic' | 'fashion'	'default'	版型类型

Slots

插槽名	说明
header	头部内容插槽
aside	侧边内容插槽
default	主要内容插槽（主内容区）
footer	底部内容插槽

Types

type IContainerPattern = 'default' | 'simple' | 'legend' | 'classic' | 'fashion'

最佳实践

1. 根据项目需求选择版型

项目类型	推荐版型	原因
标准后台管理	classic	顶栏+侧栏+主内容，最常用
数据大屏	simple	仅顶栏+主内容，最大化展示空间
文档/帮助中心	fashion	侧栏导航+底栏版权，无顶栏
完整框架	legend / default	四区域齐全，适合复杂系统

2. 给 Container 设置明确高度

Container 需要一个明确的高度才能正确计算各区域布局：

/* 推荐设置为视口高度 */
.tiny-container {
  height: 100vh;
}/* 或在父容器中设置 */
.app-layout {
  height: 100vh;
}

3. 主内容区添加滚动

主内容区内容可能超出视口，建议添加 overflow 处理：

4. 侧边栏可折叠

结合响应式数据实现侧边栏折叠：

5. 版型可动态切换

通过响应式变量动态切换版型，实现布局定制功能：

总结

Container 组件是 TinyVue 为中后台布局量身打造的容器组件。5 种预置版型覆盖了最常见的布局结构，配合尺寸属性和插槽，可快速搭建页面骨架。相比手动编写 Flex 或 Grid 布局，Container 切换版型仅需一行代码，开发效率显著提升。推荐在项目根布局中使用，结合 NavMenu、RouterView 等组件构建完整的应用框架。

---