更新记录

1.0.0（2025-04-17） 下载此版本

• 组件初始化

平台兼容性

o-layout

用于组织页面的框架结构

使用方法

<o-layout>容器，可包裹子组件<o-header>、<o-footer>、<o-aside>、<o-main>。

当子元素中包含 <o-aside> 时，全部子元素会水平(左右)排列，否则会垂直(上下)排列。

<template>
  <o-layout>
    <o-header>header</o-header>
    <o-main>main</o-main>
    <o-footer>footer</o-footer>
  </o-layout>
</template>

<template>
    <o-layout height="100vh">
        <o-aside class="br-solid-1">1</o-aside>
        <o-main class="bg-gray-10">
            ……
        </o-main>
    </o-layout>
</template>

<template>
    <o-layout height="100vh">
        <o-aside width="80px">123</o-aside>
        <o-layout>
            <o-header class="bb-solid-1">header</o-header>
            <o-layout height="calc(100vh - 57px)">
                <o-aside width="20vw" trans>
                    ……
                </o-aside>
                <o-main class="bg-gray-10 px-4 py-3">
                    ……
                </o-main>
            </o-layout>
        </o-layout>
    </o-layout>
</template>

API

o-layout 容器

o-header 页头

o-aside 侧边栏

o-main 主内容

o-footer 页脚