全方位掌握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組件了。