当前位置：首页 > article >正文

element-plus教程：Layout 布局

article 2024/11/24 6:54:34

一、基础用法

1. 引入Layout布局组件

首先，确保你已经在项目中安装了Element Plus，并在main.js或main.ts中引入了Element Plus及其样式。

2. 使用`<el-row>`和`<el-col>`组件

在Element Plus中，Layout布局主要通过<el-row>和<el-col>组件来实现。<el-row>代表一行，而<el-col>代表一行中的一列。

<el-row>：用于定义一行，可以包含多个<el-col>组件。
<el-col>：用于定义一行中的一列，通过:span属性来设置该列占据的栅格数（默认每行被等分为24栅格）。

示例代码：

<template>
  <el-row>
    <el-col :span="12">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
  </el-row>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

二、栅格间隔

默认情况下，<el-col>组件之间是没有间隔的，但你可以通过给<el-row>组件添加:gutter属性来设置栅格间隔。间隔值是一个数字，表示栅格之间的间距（以像素为单位）。

示例代码：

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
  </el-row>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
  box-sizing: border-box;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

三、响应式布局

Element Plus提供了预设的五个响应尺寸：xs、sm、md、lg和xl，分别对应不同的屏幕宽度范围。你可以通过给<el-col>组件添加这些属性来实现响应式布局。

示例代码：

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

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
  box-sizing: border-box;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

在这个示例中，根据屏幕宽度的不同，每列占据的栅格数会自动调整，从而实现响应式布局。

四、混合布局

Element Plus允许你在同一行内创建任意组合的混合布局。只需通过调整:span属性的值，即可灵活地控制每列占据的栅格数。

示例代码：

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
  box-sizing: border-box;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

五、注意事项

在使用Layout布局时，请确保<el-row>和<el-col>组件的嵌套关系正确，即<el-col>组件必须作为<el-row>组件的直接子组件。
当设置栅格间隔时，请注意调整子元素的样式（如padding），以确保布局效果符合预期。
在进行响应式布局时，请仔细测试不同屏幕宽度下的布局效果，以确保用户体验的一致性。

查看全文

http://www.kler.cn/a/406834.html