# ULinearLayout 线性布局 - [示例](#示例) - [基本用法](#基本用法) - [方向](#方向) - [展示方式与布局方式](#展示方式与布局方式) - [间距](#间距) - [水平分布方式](#水平分布方式) - [Flex模式](#flex模式) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) **Layout** 内部元素按照一定的规则布局 ## 示例 处理页面中各组件之间的间距，方法有很多，但经常会出现捉襟见肘的情况。 比如一种常见的方法是，给一些默认组件如按钮之间添加`margin`样式。这种方法的问题在于，有时会出现间距多余的情况，使得之后样式处理常常要作一些减法，而且按钮周围的组件不一定继续是按钮，组件之间间距有n^2种情况，到最后开发者自己也摸不清处理了多少。另一种方法是，使用一些类似`margin-sm`简单的 class 来控制间距。它的典型问题是，class 经常会被滥用，而且污染了 html 结构，因为处理间距本来是一个样式问题，现在却要经常声明在 html 中，另一个问题是经常第一项或最后一项不加，缺乏一种对称性的美感。 考虑到以上各种问题，我们参考一些 native 开发如 Android 的布局方式，总结出这个简单易用的布局组件——线性布局。 ### 基本用法 一般具有`inline`特性的组件，可以直接在外面套一个``，就会拉开间隔。 ``` vue ``` ### 方向 默认方向为`horizontal`，它只处理具有`inline`特性的组件，拉开横向的间隔；方向也可以设置为`vertical`，它只处理具有`block`特性的组件。 ``` html Button Button Button

``` ### 展示方式与布局方式 展示方式`display`用于控制``本身是否为块级元素或行内元素，而布局方式`layout`用于迅速调整子元素或组件的展示方式。 ``` html Button Button Button <u-linear-layout>本身为<block>类型，修改display可以拥有行内的特性。 Button Button Button 这个<u-linear-layout>中的元素本来都是行内元素，添加layout属性后可全部变成块级元素。 ``` ### 间距 水平和垂直方向都可以通过设置`gap`属性，调整间距大小。 ``` html Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button ``` ### 水平分布方式 考虑到兼容 IE9，普通的分布方式是用`inline-block`与`text-align`两个特性实现的，只支持水平方向。 > 没有用`float`的主要原因是：1. 需要外加父元素或后继元素清除浮动，2. 浮动之后`vertial-align`对齐不太可控。 > > 但`text-align`也有个坑，就是会影响子元素默认的对齐方式。如果有更好的解决方案，欢迎提供。 如果想使用没有坑、更灵活的分布方式，请使用后面的 Flex 模式，但要确保你的浏览器支持该功能。 ``` html Button Button Button Button Button Button Button Button Button Button Button ``` > `space-between`目前只支持左右两个元素，为了兼容没办法。 请不要忘记，``可以很方便的嵌套使用。 ``` html Button Button Button Button Button ``` ### Flex模式 #### 主轴分布方式 ``` html Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button ``` #### 交叉轴对齐方式 ``` html Block Block Block Block Block Block Block Block Block Block Block Block Block Block Block ``` #### 测试滚动事件 ```html Block Block Block ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | display | string | `[object Object]`
`[object Object]` | `'block'` | 行内展示，或块级换行展示 | | type | string | `[object Object]` | | 布局模式 | | mode | string | `[object Object]`
`[object Object]`
`[object Object]` | `'block'` | | | 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'` | | | layout | string | `[object Object]`
`[object Object]`
`[object Object]` | `'none'` | 子元素行内展示或块级换行展示 | | wrap | boolean | | `true` | 设置弹性布局下子元素总宽度超出父级时子元素是否换行展示 | | loadingIcon | icon | | `'loading'` | 加载中状态显示的图标 | | loadingIconRotate | boolean | | `true` | 设置加载中图标是否旋转，默认开启。 | | loadingText | string | | `''` | 加载中状态显示的提示文案 | | gap | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 内容块间隙大小 | ### Slots #### (default) 内容 ### Events #### @click 在元素上按下并释放任意鼠标按钮时触发。 #### @dblclick 在元素上双击鼠标按钮时触发。 #### @contextmenu 在右键菜单显示前触发。 #### @mousedown 在元素上按下任意鼠标按钮时触发。 #### @mouseup 在元素上释放任意鼠标按钮时触发。 #### @mouseenter 鼠标移入元素时触发。 #### @mouseleave 鼠标移出元素时触发。 #### @scroll 滚动时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 滚动事件对象 | | $event.scrollHeight | any | 滚动内容高度 | | $event.scrollWidth | any | 滚动内容宽度 | | $event.scrollTop | any | 滚动内容距离顶部高度 | | $event.scrollLeft | any | 滚动内容距离左侧宽度 | | $event.clientHeight | any | 可视区域高度 | | $event.clientWidth | any | 可视区域宽度 | Methods #### openLoading() 打开加载中 #### closeLoading() 关闭加载中