Vue EasyUI 布局

布局（ Layout ）可视为一个容器。该容器内部可划分五个区域：北区（ North ） 、南区（ South ） 、东区（ East ） 、西区（ West ）和中区（ Center ）。 布局（ Layout ）中区（ Center ）是必需区块，北区（ North ） 、南区（ South ） 、东区（ East ） 、西区（ West ）是可选区块。 布局（ Layout ）可以嵌套，因此您可以凭个人意愿构建复杂多变的布局。

属性列表

方法列表

注：
- 继承： None 。

使用方法

1. 通过 HTML 标记创建布局（ Layout ）。

    <Layout style="width:700px;height:250px;">
        <LayoutPanel region="north" style="height:50px;">
            <div class="layout_north">北区</div>
        </LayoutPanel>
        <LayoutPanel region="south" style="height:50px;">
            <div class="layout_south">南区</div>
        </LayoutPanel>
        <LayoutPanel region="west" style="width:120px;">
            <div class="layout_west">西区</div>
        </LayoutPanel>
        <LayoutPanel region="east" style="width:120px;">
            <div class="layout_east">东区</div>
        </LayoutPanel>
        <LayoutPanel region="center" style="height:100%">
            <div class="layout_center">中区</div>
        </LayoutPanel>
    </Layout>

1. 创建嵌套布局（ Layout ）。

    <Layout style="width:100%;height:100%;">
        <LayoutPanel region="north" style="height:50px;">
            <div class="layout_north">北区</div>
        </LayoutPanel>
        <LayoutPanel region="center" style="height:100%">
            <div class="layout_center">
                中区
                <Layout style="width:100%;height:50%;">
                    <LayoutPanel region="east" style="width:120px;">
                        <div class="layout_east">嵌套东区</div>
                    </LayoutPanel>
                    <LayoutPanel region="center" style="height:100%">
                        <div class="layout_center">嵌套中区</div>
                    </LayoutPanel>
                </Layout>
            </div>
        </LayoutPanel>
    </Layout>

注：
- 边缘区域可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。