前端项目开发 如何更好的使用element-ui实现左右分布的布局样式

在前端开发中，使用 Element UI 库来实现左右分布的布局是一个非常常见的需求。Element UI 提供了一些方便的布局组件，如 Row 和 Col，可以帮助我们快速实现响应式布局。下面我将为你展示如何使用 Element UI 实现一个简单的左右分布布局。

1. 基本的左右分布布局

在 Element UI 中，使用 Row 组件和 Col 组件来控制布局。Row 是一个容器，Col 是其中的项。通过指定 Col 的宽度，可以实现左右分布的效果。

示例代码：

<template>
  <el-row>
    <el-col :span="12">
      <div class="left">左侧内容</div>
    </el-col>
    <el-col :span="12">
      <div class="right">右侧内容</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "LeftRightLayout"
};
</script>

<style scoped>
.left, .right {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  text-align: center;
}

.left {
  background-color: #d3f2ff;
}

.right {
  background-color: #fdd3d3;
}
</style>

解释：

• el-row 用来创建一个行容器。
• el-col 用来创建每一列，span="12" 表示该列占据了 12/24（即一半）的宽度，因此左右两列各占一半的宽度。
• 在每个 el-col 中，我们可以放置自定义内容，这里是 left 和 right 作为左右两部分的内容。
• padding 和 background-color 等样式用于给内容添加一些外观效果。

2. 响应式布局

为了确保布局在不同屏幕尺寸下能够自动调整，我们可以使用 Element UI 提供的响应式特性。span 属性支持响应式配置，可以为不同的屏幕尺寸设置不同的宽度。

示例代码：响应式左右分布

<template>
  <el-row>
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
      <div class="left">左侧内容</div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
      <div class="right">右侧内容</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "ResponsiveLayout"
};
</script>

<style scoped>
.left, .right {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  text-align: center;
}

.left {
  background-color: #d3f2ff;
}

.right {
  background-color: #fdd3d3;
}
</style>

解释：

• :xs, :sm, :md, :lg, :xl 属性分别代表不同屏幕尺寸下列的宽度。
• 这里我们设置在 xs（极小屏幕，如手机）时每个列占据 24（即 100% 宽度），而在其他屏幕尺寸（如 sm, md, lg, xl）时，每列占据 12（即 50% 宽度），确保在大屏幕时左右各占 50% 宽度，在小屏幕时每列会自动堆叠。

3. 左右分布，带有间距

你还可以通过调整 el-row 的 gutter 属性来设置列之间的间距。

示例代码：带有间距的左右布局

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="left">左侧内容</div>
    </el-col>
    <el-col :span="12">
      <div class="right">右侧内容</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "LayoutWithGutter"
};
</script>

<style scoped>
.left, .right {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  text-align: center;
}

.left {
  background-color: #d3f2ff;
}

.right {
  background-color: #fdd3d3;
}
</style>

解释：

• el-row 上的 gutter="20" 属性设置了列之间的间距为 20px，确保左右两列之间有一定的间隔。

4. 使用 Flexbox 实现更灵活的左右分布

如果你希望更灵活地控制布局，可以结合使用 Flexbox 布局。Element UI 的 el-row 默认已经是 Flex 布局，因此你可以通过 justify 和 align 属性来调整对齐方式。

示例代码：使用 Flexbox 实现左右分布

<template>
  <el-row justify="space-between" align="middle">
    <el-col :span="11">
      <div class="left">左侧内容</div>
    </el-col>
    <el-col :span="11">
      <div class="right">右侧内容</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "FlexLayout"
};
</script>

<style scoped>
.left, .right {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  text-align: center;
}

.left {
  background-color: #d3f2ff;
}

.right {
  background-color: #fdd3d3;
}
</style>

解释：

• justify="space-between"：让左右两列分布在两侧，两列之间有最大的间隔。
• align="middle"：确保列在交叉轴（垂直方向）上居中对齐。

总结

通过 Element UI 的 Row 和 Col 组件，你可以非常容易地实现响应式的左右分布布局。关键的属性包括：

• span：用于设置列的宽度比例。
• gutter：用于设置列之间的间距。
• justify 和 align：用于调整对齐方式，特别是使用 Flexbox 布局时。

以上就是使用 Element UI 实现左右分布布局的几种常见方式，可以根据需求灵活选择。