Layout 布局

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

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

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

说明

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

基础布局

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

<template>
  <div class="demo-layout">
    <el-row :gutter="20">
      <el-col :span="24"><div class="grid-content bg-dark">span: 24</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"><div class="grid-content">span: 12</div></el-col>
      <el-col :span="12"><div class="grid-content bg-light">span: 12</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content">span: 8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-light">span: 8</div></el-col>
      <el-col :span="8"><div class="grid-content">span: 8</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="i in 4" :key="i"><div class="grid-content bg-light">span: 6</div></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-layout { display: flex; flex-direction: column; gap: 16px; }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
}
.bg-dark { background: var(--el-color-primary); }
.bg-light { background: var(--el-color-primary-light-5); }
</style>

分栏间隔

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

<template>
  <div class="demo-layout">
    <el-row :gutter="0">
      <el-col :span="6" v-for="i in 4" :key="i"><div class="grid-content">gutter: 0</div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="i in 4" :key="i"><div class="grid-content">gutter: 10</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="i in 4" :key="i"><div class="grid-content">gutter: 20</div></el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="6" v-for="i in 4" :key="i"><div class="grid-content">gutter: 40</div></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-layout { display: flex; flex-direction: column; gap: 16px; }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
}
</style>

混合布局

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

<template>
  <div class="demo-layout">
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content bg-dark">span: 16</div></el-col>
      <el-col :span="8"><div class="grid-content">span: 8</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-light">span: 8</div></el-col>
      <el-col :span="8"><div class="grid-content">span: 8</div></el-col>
      <el-col :span="4"><div class="grid-content bg-light">span: 4</div></el-col>
      <el-col :span="4"><div class="grid-content">span: 4</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="i in 6" :key="i"><div class="grid-content">span: 4</div></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-layout { display: flex; flex-direction: column; gap: 16px; }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
}
.bg-dark { background: var(--el-color-primary); }
.bg-light { background: var(--el-color-primary-light-5); }
</style>

列偏移

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

<template>
  <div class="demo-layout">
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content">span: 6</div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content">span: 6 offset: 6</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content">span: 6 offset: 6</div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content">span: 6 offset: 6</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="grid-content">span: 12 offset: 6</div></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-layout { display: flex; flex-direction: column; gap: 16px; }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
}
</style>

对齐方式

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

<template>
  <div class="demo-layout">
    <el-row justify="start" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">start</div></el-col>
    </el-row>
    <el-row justify="center" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">center</div></el-col>
    </el-row>
    <el-row justify="end" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">end</div></el-col>
    </el-row>
    <el-row justify="space-between" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">space-between</div></el-col>
    </el-row>
    <el-row justify="space-around" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">space-around</div></el-col>
    </el-row>
    <el-row justify="space-evenly" :gutter="20">
      <el-col :span="4" v-for="i in 4" :key="i"><div class="grid-content">space-evenly</div></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-layout { display: flex; flex-direction: column; gap: 12px; }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
  font-size: 12px;
}
</style>

响应式布局

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

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">xs:24 sm:12 md:8 lg:6 xl:4</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">xs:24 sm:12 md:8 lg:6 xl:4</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">xs:24 sm:12 md:8 lg:6 xl:4</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">xs:24 sm:12 md:8 lg:6 xl:4</div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { Row as ElRow, Col as ElCol } from '@szhn/dh-design-pc'

</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--el-color-primary-light-3);
  font-size: 12px;
  margin-bottom: 12px;
}
</style>

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。

Layout 布局 ​

基础布局 ​

分栏间隔 ​

混合布局 ​

列偏移 ​

对齐方式 ​

响应式布局 ​

API ​

Row Attributes ​

Col Attributes ​