全方位掌握el-row

一、gutter

gutter是el-row中的一个很重要的属性，可以设置el-row中每个col之间的间距大小。

我们可以通过如下代码给el-row设置gutter:

<el-row :gutter="20">
  <el-col :span="12"></el-col>
  <el-col :span="12"></el-col>
</el-row>

其中gutter的值可以是px、em或rem的单位，也可以是百分比。

如果我们需要给el-row设置不同的gutter，可以使用以下代码：

<el-row :gutter="[20, 40]">
  <el-col :span="12"></el-col>
  <el-col :span="12"></el-col>
</el-row>

这里的数组中第一个值代表水平方向上的gutter，第二个值代表垂直方向上的gutter。

除了在el-row中设置gutter以外，我们还可以在全局的样式表中设置el-row的gutter：

.el-row {
  margin-left: -10px;
  margin-right: -10px;
}

.el-col {
  padding-left: 10px;
  padding-right: 10px;
}

这里我们需要设置左右margin为负的gutter值，同时给el-col设置padding为gutter值。

二、el-row基本用法

el-row是一个布局组件，常用于将页面划分为几个区域，便于进行页面布局。

我们可以通过如下代码来使用el-row：

<el-row>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
  <el-col :span="8"></el-col>
</el-row>

其中，el-row中包含了三个等分的el-col。

el-col的属性定义了col的宽度，可以是1~24之间的整数。

三、响应式布局

在移动设备中，我们常常需要使用响应式布局，使页面在不同的设备上表现更佳。

我们可以通过属性来设置el-col在不同设备上的宽度。

例如，我们可以使用如下代码来定义一个在移动端占据整个屏幕的el-col：

<el-col :span="24" :xs="24"></el-col>

这里的xs属性指明了在移动设备中，该el-col占据整个屏幕。

除了xs属性以外，我们还可以使用sm、md、lg、xl、xxl属性来设置不同设备下的col宽度，如下代码：

<el-col :span="12" :sm="8" :md="6" :lg="4" :xl="3"></el-col>

这里的sm、md、lg、xl、xxl属性可以分别设置在不同设备上el-col的宽度，如果没有设置，则默认使用。

四、el-row封装实践

最后，我们可以将el-row进行封装，定义一个自定义组件，便于在项目中使用。

例如，我们可以定义一个名为MyRow的组件：

<template>
<el-row :gutter="gutter">
  <slot></slot>
</el-row>
</template>

<script>
export default {
  name: 'MyRow',
  props: {
    gutter: {
      type: [Number, Array],
      default: 0
    }
  }
}
</script>

这里的MyRow组件接受一个gutter属性，用于设置el-row的gutter，同时通过slot可以将el-col传递进来。

使用MyRow组件可以简化el-row的写法，如下代码：

<my-row :gutter="20">
  <el-col :span="12"></el-col>
  <el-col :span="12"></el-col>
</my-row>

这样我们就可以在项目中方便地使用自己定义的MyRow组件了。