cloud-ui.vusion

# UMultiLayout 分栏布局 - [示例](#示例) - [两栏-左侧固定](#两栏-左侧固定) - [三栏-常规](#三栏-常规) - [三栏-全部](#三栏-全部) - [通栏-纵向](#通栏-纵向) - [通栏-横向](#通栏-横向) - [两栏-右侧固定](#两栏-右侧固定) - [三栏-双左栏](#三栏-双左栏) - [UMultiLayout API](#umultilayout-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [UMultiLayoutItem API](#umultilayoutitem-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [Events](#events-2) **Layout** 一定的规则布局 ## 示例 ### 两栏-左侧固定 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> <u-multi-layout> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> </u-multi-layout> ``` ### 三栏-常规 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> <u-multi-layout> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> </u-multi-layout> ``` ### 三栏-全部 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> <u-multi-layout> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> </u-multi-layout> ``` ### 通栏-纵向 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> </u-multi-layout> ``` ### 通栏-横向 ``` html <u-multi-layout> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> </u-multi-layout> ``` ### 两栏-右侧固定 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> <u-multi-layout> <u-multi-layout-item style="width: 200px;"> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> </u-multi-layout> ``` ### 三栏-双左栏 ``` html <u-multi-layout direction="vertical"> <u-multi-layout-item style="height: 60px;"> </u-multi-layout-item> <u-multi-layout-item> <u-multi-layout> <u-multi-layout-item style="width: 400px;"> <u-multi-layout> <u-multi-layout-item> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> <u-multi-layout-item> </u-multi-layout-item> </u-multi-layout> </u-multi-layout-item> </u-multi-layout> ``` ## UMultiLayout API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | direction | string | `[object Object]` `[object Object]` | `'horizontal'` | | | justify | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'start'` | | | alignment | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'stretch'` | | | alignment | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'stretch'` | | | justify | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'start'` | | | gap | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'none'` | 布局中各分栏间的空隙大小 | ### Slots #### (default) 插入`<u-multi-layout-item>`子组件。 ### Events #### @scroll 滚动时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 滚动事件对象 | | $event.scrollHeight | any | 滚动内容高度 | | $event.scrollWidth | any | 滚动内容宽度 | | $event.scrollTop | any | 滚动内容距离顶部高度 | | $event.scrollLeft | any | 滚动内容距离左侧宽度 | | $event.clientHeight | any | 可视区域高度 | | $event.clientWidth | any | 可视区域宽度 | #### @$listeners 监听所有事件。 | Param | Type | Description | | ----- | ---- | ----------- | ## UMultiLayoutItem API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | fixed | boolean | | `false` | 开启后滚动时该项固定显示 | | fixdirec | string | `[object Object]` `[object Object]` | `'left'` | 固定在左侧还是右侧 | | display | string | `[object Object]` `[object Object]` | `'block'` | 行内展示，或块级换行展示 | | mode | string | `[object Object]` `[object Object]` | `'inline'` | | | direction | string | `[object Object]` `[object Object]` | `'horizontal'` | 可更改布局的排列方向 | | justify | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'start'` | | | alignment | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'stretch'` | | | alignment | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'stretch'` | | | justify | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'start'` | | | gap | string | `[object Object]` `[object Object]` `[object Object]` `[object Object]` `[object Object]` | `'none'` | 内容块间隙大小 | ### Slots #### (default) 内容 ### Events #### @$listeners 监听所有事件。 | Param | Type | Description | | ----- | ---- | ----------- |