Vue.js

如果超人不会飞
23 阅读5分钟

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

本文是 TinyVue 组件库使用指南系列的第四篇，将详细介绍 Container 容器布局组件的用法、属性、插槽和最佳实践。

前言

后台管理系统的经典布局——顶部导航 + 左侧菜单 + 主内容区 + 底部状态栏，几乎每个中后台项目都会用到。TinyVue 的 Container 组件预置了 5 种版型（layout pattern），一行配置即可切换整体布局结构，省去手写 Flex/Grid 的繁琐。

组件介绍

<tiny-container> 是 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 属性选择版型，版型决定了各插槽是否显示以及显示位置：

<template>
  <div>
    <tiny-radio-group v-model="pattern">
      <tiny-radio label="default">默认</tiny-radio>
      <tiny-radio label="classic">经典</tiny-radio>
      <tiny-radio label="simple">简约</tiny-radio>
      <tiny-radio label="fashion">时尚</tiny-radio>
      <tiny-radio label="legend">传奇</tiny-radio>
    </tiny-radio-group>

    <tiny-container :pattern="pattern">
      <div>主内容区 Main</div>
      <template #header>
        <div>顶部 Header</div>
      </template>
      <template #aside>
        <div>侧边 Aside</div>
      </template>
      <template #footer>
        <div>底部 Footer</div>
      </template>
    </tiny-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue'

const pattern = ref('default')
</script>

五种版型详解

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

说明：版型决定了哪些区域可见。例如 simple 版型不显示 aside 和 footer，fashion 版型不显示 header。

自定义宽高

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

<template>
  <tiny-container
    pattern="legend"
    :aside-width="asideWidth"
    :footer-height="footerHeight"
    :header-height="headerHeight"
  >
    <template #header>
      <div>Header - 高度 {{ headerHeight }}px</div>
    </template>
    <template #aside>
      <div>Aside - 宽度 {{ asideWidth }}px</div>
    </template>
    <div>Main - 自动填充剩余空间</div>
    <template #footer>
      <div>Footer - 高度 {{ footerHeight }}px</div>
    </template>
  </tiny-container>
</template>

<script setup>
import { ref } from 'vue'
import { TinyContainer } from '@opentiny/vue'

const asideWidth = ref(200)
const footerHeight = ref(80)
const headerHeight = ref(80)
</script>

尺寸属性说明

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

提示：三个属性均支持 number 和 string 类型。传数字时单位为 px，传字符串时可使用其他单位（如 '10rem'）。

插槽详解

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

header 插槽

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

<template #header>
  <nav class="top-nav">
    <span class="logo">MyApp</span>
    <span class="user-info">管理员</span>
  </nav>
</template>

aside 插槽

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

<template #aside>
  <tiny-nav-menu :data="menuData" />
</template>

default 插槽（主内容区）

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

<!-- 不需要 template 包裹 -->
<div class="page-content">
  <router-view />
</div>

footer 插槽

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

<template #footer>
  <div class="footer-bar">
    Copyright 2026 My Company
  </div>
</template>

实战示例：后台管理布局

<template>
  <tiny-container pattern="classic" :aside-width="220" :header-height="56">
    <template #header>
      <div class="app-header">
        <span class="logo">Admin System</span>
        <div class="header-right">
          <tiny-button type="text" @click="handleLogout">退出</tiny-button>
        </div>
      </div>
    </template>

    <template #aside>
      <tiny-nav-menu :data="menuData" />
    </template>

    <!-- 主内容区 -->
    <div class="app-main">
      <router-view />
    </div>
  </tiny-container>
</template>

<script setup>
import { TinyContainer, TinyNavMenu, TinyButton } from '@opentiny/vue'

const menuData = [
  { title: '首页', id: 1 },
  { title: '用户管理', id: 2 },
  { title: '系统设置', id: 3 }
]

const handleLogout = () => {
  // 退出逻辑
}
</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
}
.logo {
  font-size: 18px;
  font-weight: bold;
}
.app-main {
  padding: 16px;
  height: 100%;
  overflow: auto;
}
</style>

API 参考

Props

属性名类型默认值说明
aside-widthnumber | string200左侧区域宽度
footer-heightnumber | string60底部区域高度
header-heightnumber | string60头部区域高度
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 处理：

<template>
  <tiny-container pattern="classic">
    <template #header><!-- 导航 --></template>
    <template #aside><!-- 菜单 --></template>
    <div class="main-scroll">
      <router-view />
    </div>
  </tiny-container>
</template>

<style scoped>
.main-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}
</style>

4. 侧边栏可折叠

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

<template>
  <tiny-container
    pattern="classic"
    :aside-width="collapsed ? 64 : 220"
  >
    <template #aside>
      <tiny-nav-menu :data="menuData" :collapsed="collapsed" />
    </template>
    <!-- ... -->
  </tiny-container>
</template>

<script setup>
import { ref } from 'vue'
const collapsed = ref(false)
</script>

5. 版型可动态切换

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

<template>
  <tiny-container :pattern="layoutPattern">
    <!-- ... -->
  </tiny-container>
</template>

<script setup>
import { computed } from 'vue'
import { useLayoutStore } from '@/stores/layout'

const layoutStore = useLayoutStore()
const layoutPattern = computed(() => layoutStore.pattern)
</script>

总结

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

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，实现AI理解用户意图自主完成任务，加速企业应用的智能化改造。

avatar
文章
阅读
粉丝