Vue EasyUI 布局

布局（ Layout ）可視為一個容器。該容器內(nèi)部可劃分五個區(qū)域：北區(qū)（ North ） 、南區(qū)（ South ） 、東區(qū)（ East ） 、西區(qū)（ West ）和中區(qū)（ Center ）。 布局（ Layout ）中區(qū)（ Center ）是必需區(qū)塊，北區(qū)（ North ） 、南區(qū)（ South ） 、東區(qū)（ East ） 、西區(qū)（ West ）是可選區(qū)塊。 布局（ Layout ）可以嵌套，因此您可以憑個人意愿構(gòu)建復(fù)雜多變的布局。

屬性列表

方法列表

注：
- 繼承： None 。

使用方法

1. 通過 HTML 標記創(chuàng)建布局（ Layout ）。

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

1. 創(chuàng)建嵌套布局（ Layout ）。

    <Layout style="width:100%;height:100%;">
        <LayoutPanel region="north" style="height:50px;">
            <div class="layout_north">北區(qū)</div>
        </LayoutPanel>
        <LayoutPanel region="center" style="height:100%">
            <div class="layout_center">
                中區(qū)
                <Layout style="width:100%;height:50%;">
                    <LayoutPanel region="east" style="width:120px;">
                        <div class="layout_east">嵌套東區(qū)</div>
                    </LayoutPanel>
                    <LayoutPanel region="center" style="height:100%">
                        <div class="layout_center">嵌套中區(qū)</div>
                    </LayoutPanel>
                </Layout>
            </div>
        </LayoutPanel>
    </Layout>

注：
- 邊緣區(qū)域可通過拖拽邊框調(diào)整尺寸，也可以通過點擊折疊觸發(fā)器來折疊面板。