vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]本文仅供参考:首先你要掌握的基础知识:row行概念<el-row></el-row>col列概念<el-col></el-col>col组件的:span属性的布局调整,一共分为24栏:代码示例:<el-row><el-col:span=”24″><divclass=”g…

大家好,又见面了,我是你们的朋友全栈君。

本文仅供参考:

首先你要掌握的基础知识:

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>           

效果展示:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

代码示例:

<el-row>
  <el-col :span="12"><div class="grid-content"></div></el-col>
</el-row>

效果展示:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

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>

 

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
 

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>

 

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
 

对齐方式:

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

 

  1. justify=center 居中对齐
  2. justify=start 左对齐
  3. justify=end 右对齐
  4. justify=space-between 空格间距在中间对齐
  5. 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>

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
 

响应式布局:

参考bootstrap的响应式,预设四个尺寸

  1. xs <768px
  2. sm ≥768px
  3. md ≥992
  4. 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">
            <!-- {
  
  {selected}} -->
            <div style="height:100%;width:100%" v-if="selected==0">
            <!-- 1*1布局 -->
                <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                  <el-col :span="24"></el-col>
                </el-row>
            </div>
            <!-- 2*1布局 -->
            <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>
            <!-- 2*2 -->
            <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>
            <!-- 3*2布局 -->
            <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>
            <!-- 3*3模式 -->
            <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>

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143352.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 用js来实现那些数据结构13(树01-二叉搜索树的实现)

    前一篇文章我们学会了第一个非顺序数据结构hashMap,那么这一篇我们来学学树,包括树的概念和一些相关的术语以及二叉搜索树的实现。唉?为什么不是树的实现,不是二叉树的实现。偏偏是二叉搜索树的实现?嗯,

  • 电商平台微服务架构演进

    电商平台微服务架构演进一初始架构引入nacos后的基础架构图。二加入Ribbon后的架构引入多个微服务,每个微服务通过Ribbon进行相互调用。三引入Feign后的架构Feign底层还是会调用Ribbon进行负载均衡。四引入sentinel1解决问题实现服务降级、限流、熔断。2官网introduction3配置a限流和降级配置页面b限流配置c降级配置五引入seata1解决问题解决分布式事…

  • Java课设:学生管理系统

    Java课设:学生管理系统文章目录StudentManagerStudentManagerMain.javaStuInfo.javaClassInfo.javaScoreInfo.javaAdd.javaDelete.javaStudentManager查询学生的个人基本信息,查询课程表、选课情况,查询课程的成绩信息。其中课程表及选课信息和成绩信息无法改动,个人基本信息可以添加或者删除。这是一个比较简单的管理系统,具…

  • 在嵌入式系统中使用opkg做版本升级

    在嵌入式系统中使用opkg做版本升级一、opkg工具版本使用opkg0.3.5版本,原buildroot自带是opkg0.3.0版本,opkg0.3.0版本不支持.gz文件的解压,所以需要升级到opkg0.3.5版本。opkg工具的默认配置文件目录:/etc/opkg/opkg.conf包服务器地址:http://sylk-sh-buffer.oss-cn-beijing.aliyuncs.com/pac…

  • H2数据库集群_数据库集群搭建

    H2数据库集群_数据库集群搭建H2数据库集群1.H2数据库简介1.1H2数据库优势常用的开源数据库:H2,Derby,HSQLDB,MySQL,PostgreSQL。其中H2,HSQLDB类似,十分适合作为嵌入式数据库使用,其它的数据库大部分都需要安装独立的客户端和服务器端。H2的优势:1、h2采用纯Java编写,因此不受平台的限制。2、h2只有一个jar文件,十分适合作为嵌入式数据库试用。3、性能和功能的优

    2022年10月12日
  • IDEA优化内存配置,可提高启动和运行速度(亲测有效)「建议收藏」

    IDEA优化内存配置,可提高启动和运行速度(亲测有效)「建议收藏」一、优化IDEA配置IDEA默认启动配置主要考虑低配置用户,参数不高(默认最低128m,最高512m),导致启动慢,然后运行也不流畅,这里我们需要优化下启动和运行配置;但是在工作中的电脑一般都是8G或者16G的运行内存,所以我们需要手动去修改默认的IDEA配置。二、手动修改IDEA配置步骤找到IDEA安装的bin目录打开idea.exe.vmoptions文件关键的三个参…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号