Vue EasyUI 布局

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

属性列表

名称	数据类型	作用描述	默认值
layaotCls	string	布局样式类。	null
layaotStyle	Object	布局内联样式。	null

方法列表

名称	参数	返回值	作用描述
getPanel	region	layoutPanel	获取区域面板组件。

注：
- 继承： None 。

使用方法

通过 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>

创建嵌套布局（ 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>

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