是 Engage 前端布局基本组件(相当于 div 之于 HTML)。使用 flex
布局,默认模拟 div 行为。它可以很方便地进行定位、对齐、宽高自适应。
# 关于对齐(align)
- 可设置子元素的垂直(vertical align)和水平对齐(horizontal align),支持类似 padding 的多段式表示方式(先垂直后水平)。如
align="center start"
表示垂直居中,水平居左——不管当前是水平还是垂直布局(flex-direction: row/column
)。 - 每个对齐方式有 start、center、end、justify 四种值,等价于 flex 布局中的对应值。注意,justify 只对主轴有效(等价于 justify-content: space-between)。至于 space-around、space-evenly 可以考虑用 padding + margin 实现。
- 子元素要覆盖父元素设置的对齐,可以利用 align-self、margin。推荐使用 margin,更加灵活强大。比如
margin:auto 0
表示让当前元素在父元素内垂直居中。
# 基础示例
可添加 style
、class
等属性设置样式。默认对齐方式是水平居左,垂直居上,等同于 align="start"
。
<template>
<EBlock class="e-block-showcase" :style="{margin: '10px', width: '300px', border: '1px solid #ddd'}">
<EBlock style="font-size: 20px;">
基础用法
</EBlock>
<!-- eslint-disable-next-line max-len -->
<EBlock :style="{width: 'calc(100% - 20px)', margin: '10px', background: '#aaa', fontSize: '16px', height: '40px', color: '#fff'}">
<i>margin="10 0" background="#aaa" height="30" fontSize=16 color="#fff"</i>
</EBlock>
</EBlock>
</template>
# align 参数使用
<template>
<EBlock :style="{margin: '10px'}">
<EBlock horizontal wrap>
<EBlock align="start"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="start"</i>
</EBlock>
<EBlock align="start center"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="start center"</i>
</EBlock>
<EBlock align="start end"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="start end"</i>
</EBlock>
<EBlock align="center start"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="center start"</i>
</EBlock>
<EBlock align="center"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="center"</i>
</EBlock>
<EBlock align="center end"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="center end"</i>
</EBlock>
<EBlock align="end start"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="end start"</i>
</EBlock>
<EBlock align="end center"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="end center"</i>
</EBlock>
<EBlock align="end"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="end"</i>
</EBlock>
<EBlock align="justify"
:style="{margin: '10px 10px 0 0', background: '#ddd', width: '150px', height: '40px'}">
<i>align="justify"</i>
</EBlock>
</EBlock>
</EBlock>
</template>
# 水平布局下的 align 对子组件的效果
<template>
<EBlock :style="{margin: '10px'}">
<EBlock horizontal wrap>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="center">
align="start"
</EBlock>
<EBlock horizontal align="start"
:style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '40px'}">
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
</EBlock>
</EBlock>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="center">
align="center"
</EBlock>
<EBlock horizontal align="center"
:style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '40px'}">
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
</EBlock>
</EBlock>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="center">
align="end"
</EBlock>
<EBlock horizontal align="end"
:style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '40px'}">
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
</EBlock>
</EBlock>
<EBlock style="width: 180px; margin-right: 10px;">
<EBlock align="center">
align="center justify"
</EBlock>
<EBlock horizontal align="center justify"
:style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '40px'}">
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#ddd', width: '30px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '30px', height: '18px'}">
<i />
</EBlock>
</EBlock>
</EBlock>
</EBlock>
</EBlock>
</template>
# 垂直布局下的 align 对子组件的效果
<template>
<EBlock :style="{margin: '10px'}">
<EBlock horizontal wrap>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock style="margin: 10px; width: calc(100% - 20px); border: 1px solid #aaa; height: 80px;">
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#aaa', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
</EBlock>
<EBlock align="center">
align="start"
</EBlock>
</EBlock>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="center"
style="margin: 10px; width: calc(100% - 20px); border: 1px solid #aaa; height: 80px;">
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#aaa', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
</EBlock>
<EBlock align="center">
align="center"
</EBlock>
</EBlock>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="end"
style="margin: 10px; width: calc(100% - 20px); border: 1px solid #aaa; height: 80px;">
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#aaa', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
</EBlock>
<EBlock align="center">
align="end"
</EBlock>
</EBlock>
<EBlock :style="{marginRight: '10px', width: '150px'}">
<EBlock align="justify center"
style="margin: 10px; width: calc(100% - 20px); border: 1px solid #aaa; height: 80px;">
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#aaa', width: '80px', height: '18px'}" />
<EBlock :style="{background: '#ddd', width: '80px', height: '18px'}" />
</EBlock>
<EBlock align="center">
align="justify center"
</EBlock>
</EBlock>
</EBlock>
</EBlock>
</template>
# 使用 margin 覆盖父组件的 align
<template>
<EBlock :style="{margin: '10px'}">
<EBlock horizontal wrap>
<EBlock :style="{width: '300px', marginRight: '10px'}">
<EBlock horizontal align="center"
:style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '40px'}">
<EBlock :style="{background: '#ddd', width: '40px', height: '18px'}">
<i />
</EBlock>
<EBlock :style="{background: '#aaa', width: '140px', height: '18px', margin: '0 auto auto'}">
<i>margin="0 auto auto"</i>
</EBlock>
<EBlock :style="{background: '#ddd', width: '40px', height: '18px'}">
<i />
</EBlock>
</EBlock>
<EBlock align="center">
align="center"
</EBlock>
</EBlock>
<EBlock :style="{width: '300px', marginRight: '10px'}">
<EBlock align="center" style="margin: 10px 0; width: 100%; height: 120px; border: 1px solid #aaa;">
<EBlock :style="{background: '#aaa', width: '180px', height: '18px'}" />
<EBlock
:style="{background: '#ddd', width: '180px', height: '18px', margin: 'auto 0 auto auto'}">
margin="auto 0 auto auto"
</EBlock>
<EBlock :style="{background: '#aaa', width: '180px', height: '18px'}" />
</EBlock>
<EBlock align="center">
align="center"
</EBlock>
</EBlock>
</EBlock>
</EBlock>
</template>
# wrap 参数使用
<template>
<EBlock :style="{margin: '10px'}">
<EBlock horizontal wrap>
<EBlock :style="{width: '100px', marginRight: '10px'}">
<EBlock horizontal wrap :style="{margin: '10px 0', border: '1px solid #aaa', height: '120px'}">
<EBlock align="center" :style="{background: '#aaa', height: '30px', width: '40px'}" />
<EBlock align="center" :style="{background: '#ddd', height: '30px', width: '40px'}" />
<EBlock align="center" :style="{background: '#ddd', height: '30px', width: '40px'}" />
</EBlock>
<EBlock align="center">
horizontal wrap
</EBlock>
</EBlock>
<EBlock :style="{width: '100px', marginRight: '10px'}">
<EBlock wrap :style="{margin: '10px 0', width: '100%', border: '1px solid #aaa', height: '120px'}">
<EBlock align="center" :style="{background: '#aaa', height: '50px', width: '30px'}" />
<EBlock align="center" :style="{background: '#ddd', height: '50px', width: '30px'}" />
<EBlock align="center" :style="{background: '#ddd', height: '50px', width: '30px'}" />
</EBlock>
<EBlock align="center">
vertical wrap
</EBlock>
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
export default {
name: 'EBlockShowcase',
};
</script>
# EBlock
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
tag | 使用何种 DOM 标签 | String | false | div |
horizontal | 是否水平布局,即对应 flex-direction: row。默认为 flex-direction: column,模拟 div 的行为 | Boolean | false | - |
color | 字体颜色,支持 primary 等预定义主题颜色 | String | false | - |
align | 设置子元素的垂直(vertical align)和水平对齐(horizontal align),支持类似 padding 的多值表示方式(先垂直后水平),每个对齐方式有 start、center、end、justify 四种值。注意,justify 只对主轴有效(等价于 justify-content: space-between。至于 space-around、space-evenly 可以考虑用 padding + margin 实现 | String | false | - |
wrap | 是否在子元素超出块大小时自动折行 | Boolean | false | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |