vue-element-ui组件 layout布局系列学习(一)

首先你要掌握的基础知识:.row 行概念<el-row></el-row>.col列概念<el-col></el-col>col组件的:span属性的布局调整,一共分为24栏:代码示例:<el-row><el-col :span="24

拿破轮

3249人浏览 · 2019-03-08 15:03:39

拿破轮 · 2019-03-08 15:03:39 发布

首先你要掌握的基础知识:
.row 行概念

<el-row></el-row>
.col 列概念

<el-col></el-col>

col组件的:span属性的布局调整,一共分为24栏:
代码示例:
<el-row>
<el-col :span="24"><div class="grid-content"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content"></div></el-col>
</el-row>

效果:
第一个:
第二个:

row组件的:gutter属性来调整布局之间的宽度---分栏间隔
代码示例:
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

效果:

Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

<el-row :gutter="20">
<el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
</el-row>

效果:

对齐方式:
row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"><div class="grid-content"></div></el-col>
</el-row>

效果:

响应式布局:
参考bootstrap的响应式，预设四个尺寸

xs <768px
sm ≥768px
md ≥992
lg ≥120
使用方式:
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

练习示例:

<span class="field-label">方块选择:</span>

<select v-model="selected" @change="selectbj(selected)">
<option v-for="option in layouts" :value="option.value">
{{ option.name }}
</option>
</select>

data默认初始化数据:
selected: 0,
layouts: [
{ 'name': '1x1模式', 'value': '0' },
{ 'name': '2x1模式', 'value': '1' },
{ 'name': '2x2模式', 'value': '2' },
{ 'name': '3x2模式', 'value': '3' },
{ 'name': '3x3模式', 'value': '4' },
{ 'name': '1+5模式', 'value': '5' }
],

布局代码:
<el-main v-model="selected" >
<div class="block" style="height:400px">

<div style="height:100%;width:100%" v-if="selected==0">

<el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
<el-col :span="24"></el-col>
</el-row>
</div>

<div style="height:100%;width:100%" v-else-if="selected==1">
<el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>

<div style="height:100%;width:100%" v-else-if="selected==2">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>

<div style="height:100%;width:100%" v-else-if="selected==3">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>

<div style="height:100%;width:100%" v-else-if="selected==4">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
</div>

<div style="height:100%;width:100%" v-else>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8">
<div class="grid-a-contentWidth"></div>
<br>
<div class="grid-a-contentWidth"></div>
</el-col>
<el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
</el-row>
</div>
</div>
</el-main>

样式(从里面对应取一下):
<style scoped>
.box-card{
width: 400px;
margin: 20px auto;
}
.block{
padding: 30px 24px;
background-color: rgb(27, 16, 16);
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
.link-title{
margin-left:35px;
}
.components-container {
       position: relative;
       height: 100vh;
   }

   .left-container {
       background-color: #F38181;
       height: 100%;
   }

   .right-container {
       background-color: #FCE38A;
       height: 200px;
   }

   .top-container {
       background-color: #FCE38A;
       width: 100%;
       height: 100%;
   }

   .bottom-container {
       width: 100%;
       background-color: #95E1D3;
       height: 100%;
   }

.left-container-twoOne {
       background-color: rgb(110, 75, 75);
height: 100%;
}

.container-onetoOne {
background-color: rgb(47, 80, 74);
height: 100%;
width: 50%;
}

.container-onetoTwo {
background-color: rgb(61, 19, 56);
height: 100%;
width: 50%;
}

.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #57926b;
}
.bg-purple {
background: #7e2970;
}
.bg-purple-light {
background: #071c4d;
}
.grid-content {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 150px;
min-width: 100px;
}
.grid-contentB {
background-color: rgb(64, 56, 134);
border-radius: 4px;
min-height: 150px;
min-width: 100px;
}
.grid-a-contentWidth {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 100px;
}
.grid-a-content-a-Width {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 220px;
}

.grid-one-contentheight {
background-color: rgb(44, 143, 121);
border-radius: 4px;
min-height: 100%;
}

.el-row-two {
margin-bottom: 80px;
margin-top: 80px;

}
</style>

效果:

---------------------
作者：jack_bob
来源：CSDN
原文：https://blog.csdn.net/jack_bob/article/details/79813114
版权声明：本文为博主原创文章，转载请附上博文链接！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

拿破轮

@fengbin2005

已为社区贡献1条内容