一、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组件了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288763.html
微信扫一扫 
支付宝扫一扫 