Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。DHdesign 的 el-row 与 el-col 默认采用 Flex 布局，可灵活组合构建响应式网格。

import { createApp } from 'vue'
import { ElRow, ElCol } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElRow)
app.use(ElCol)

说明

组件默认使用 Flex 布局，父容器不要使用 inline 相关样式，否则会导致宽度无法撑满。

基础布局

通过 el-row 与 el-col 的 span 属性自由地组合布局，每行等分为 24 份。

分栏间隔

通过 el-row 的 gutter 属性控制列之间的水平间距，单位为像素。

混合布局

通过组合不同 span 的 Col，可以得到较为复杂的混合布局。

列偏移

通过 Col 的 offset 属性可以将分栏整体向右偏移指定的栏数。

对齐方式

el-row 的 justify 属性可控制水平排列方式，可选 start、center、end、space-between、space-around、space-evenly。

响应式布局

参考 Bootstrap 的响应式设计，Col 提供 xs、sm、md、lg、xl 五个断点，拖动窗口即可观察变化。

API

Row Attributes

属性名	说明	类型	默认值
gutter	栅格间隔	number	0
justify	水平排列方式	start / center / end / space-between / space-around / space-evenly	start
align	垂直对齐方式	top / middle / bottom	—
tag	自定义标签	string	div

Col Attributes

属性名	说明	类型	默认值
span	占据的列数	number	24
offset	左侧的间隔格数	number	0
push	向右移动格数	number	0
pull	向左移动格数	number	0
xs	<768px 响应式栅格	number / object	—
sm	≥768px 响应式栅格	number / object	—
md	≥992px 响应式栅格	number / object	—
lg	≥1200px 响应式栅格	number / object	—
xl	≥1920px 响应式栅格	number / object	—
tag	自定义标签	string	div

完整 API 参考 Element Plus Layout。