cloud-ui.vusion

# 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`特性的组件，可以直接在外面套一个`<u-linear-layout>`，就会拉开间隔。 ``` vue <template> <div> <u-linear-layout :loadingIconRotate="false" style="height: 200px; border: 1px solid #aaa; padding: 20px; margin: 20px;" ref="linearLayout"></u-linear-layout> <u-button @click="onOpen">打开加载</u-button> <u-button @click="onClose">关闭加载</u-button> </div> </template> <script> export default { methods: { onOpen() { this.$refs.linearLayout.openLoading(); }, onClose() { this.$refs.linearLayout.closeLoading(); }, } } </script> ``` ### 方向默认方向为`horizontal`，它只处理具有`inline`特性的组件，拉开横向的间隔；方向也可以设置为`vertical`，它只处理具有`block`特性的组件。 ``` html <u-linear-layout type="root" direction="horizontal"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout direction="vertical"> <u-linear-progress :percent="25"></u-linear-progress> <u-linear-progress :percent="50"></u-linear-progress> <u-linear-progress :percent="75"></u-linear-progress> </u-linear-layout> ``` ### 展示方式与布局方式展示方式`display`用于控制`<u-linear-layout>`本身是否为块级元素或行内元素，而布局方式`layout`用于迅速调整子元素或组件的展示方式。 ``` html <u-linear-layout direction="vertical"> <u-linear-layout> <u-linear-layout display="inline"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <code><u-linear-layout></code>本身为<code><block></code>类型，修改<code>display</code>可以拥有行内的特性。 </u-linear-layout> <u-linear-layout direction="vertical" layout="block"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> 这个<code><u-linear-layout></code>中的元素本来都是行内元素，添加<code>layout</code>属性后可全部变成块级元素。 </u-linear-layout> </u-linear-layout> ``` ### 间距水平和垂直方向都可以通过设置`gap`属性，调整间距大小。 ``` html <u-linear-layout direction="vertical"> <u-linear-layout> <u-linear-layout display="inline" gap="small"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout display="inline" gap="none"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout display="inline" gap="shrink"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> </u-linear-layout> <u-linear-layout direction="vertical" gap="large"> <u-linear-layout gap="normal"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout gap="large"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> </u-linear-layout> </u-linear-layout> ``` ### 水平分布方式考虑到兼容 IE9，普通的分布方式是用`inline-block`与`text-align`两个特性实现的，只支持水平方向。 > 没有用`float`的主要原因是：1. 需要外加父元素或后继元素清除浮动，2. 浮动之后`vertial-align`对齐不太可控。 > > 但`text-align`也有个坑，就是会影响子元素默认的对齐方式。如果有更好的解决方案，欢迎提供。如果想使用没有坑、更灵活的分布方式，请使用后面的 Flex 模式，但要确保你的浏览器支持该功能。 ``` html <u-linear-layout direction="vertical"> <u-linear-layout justify="start"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout justify="center"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout justify="end"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout justify="space-between"> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> </u-linear-layout> ``` > `space-between`目前只支持左右两个元素，为了兼容没办法。请不要忘记，`<u-linear-layout>`可以很方便的嵌套使用。 ``` html <u-linear-layout justify="space-between"> <u-linear-layout> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout gap="shrink"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> </u-linear-layout> ``` ### Flex模式 #### 主轴分布方式 ``` html <u-linear-layout direction="vertical"> <u-linear-layout type="flex" justify="start"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout type="flex" justify="center"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout type="flex" justify="end"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout type="flex" justify="space-between"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> <u-linear-layout type="flex" justify="space-around"> <u-button>Button</u-button> <u-button>Button</u-button> <u-button>Button</u-button> </u-linear-layout> </u-linear-layout> ``` #### 交叉轴对齐方式 ``` html <u-linear-layout direction="vertical"> <u-linear-layout type="flex" alignment="start"> <u-block>Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> <u-linear-layout type="flex" alignment="center"> <u-block>Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> <u-linear-layout type="flex" alignment="end"> <u-block>Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> <u-linear-layout type="flex" alignment="baseline"> <u-block>Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> <u-linear-layout type="flex" alignment="stretch"> <u-block>Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> </u-linear-layout> ``` #### 测试滚动事件 ```html <u-linear-layout direction="vertical" style="height: 300px; overflow: scroll"> <u-linear-layout type="flex" alignment="start"> <u-block style="height: 500px">Block</u-block> <u-block size="normal auto">Block</u-block> <u-block size="large auto">Block</u-block> </u-linear-layout> </u-linear-layout> ``` ## 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() 关闭加载中