程序员经验分享-hwhale

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

2023-11-19

本文仅供参考：

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

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属性调整排版方式，属性值分别有:

 

  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>



效果:


 

响应式布局:

参考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>


效果:


 


 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端日常

布局

vue vue-element-ui组件 layout布局系列学习(一) 的相关文章

  • CSS学习--css的由来（1）

    一 什么是css 1 css Cascading Style Sheets 层叠样式表 级联样式表 2 css 是控制HTML文档内容的排版 二 css解决了什么问题 以前网页的元素的样式 全部是依靠标签属性来控制 比如 h1 align

  • Ext_面板_Ext.Panel .

    javascript view plain copy print Ext Panel主要配置表 animCollapse Boolean 设置面板折叠展开是否显示动画 Ext Fx可用默认true 否则false applyTo Mixed

  • Android dip(dp) 与 sp的自适应问题

    转自 http www oschina net question 272860 70761 今天碰到的一个问题 感觉应该其他人也会碰到 拿来分享一下 我们都知道android在开发配置界面时一般都会使用dip和sp这种逻辑长度单位来实现屏幕

  • 手机端页面自适应解决方案—rem布局

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题 当然解决方案很多 比如 百分比布局 弹性布局flex 什么是flex 也都能获得不错的效果 这里主要介绍的是本人在实践中用的最顺手最简单的布局方案 rem 什么是rem 布局 fun

  • CSS布局flex布局 对齐 等分 均分 详解

    一切都始于这样一个问题 怎样通过 CSS 简单而优雅的实现水平 垂直同时居中 记得刚开始学习 CSS 的时候 看到float属性不由得感觉眼前一亮 顺理成章的联想到 Word 文档排版中用到的的左对齐 右对齐和居中对齐 然而很快就失望的发现

  • Java JFrame常用的布局

    setLayout 布局对象 声明布局格式的方式 如 setLayout new FlowLayout 1 FlowLayout布局 FlowLayout布局是JPanel 的默认布局 组建按照加入的先后顺序从左到右排列 一行排满之后就转到

  • 关于display:inline-block的元素不在同一水平线

    今天在开发一个仿网易云的应用时 在布局上遇到一个特别奇怪的问题 先看布局如下 因为我是用vue写的 但是忽略其语法 就当是个不同的九宫格布局 css代码 就粗现了如下的情况 让我百思不得其解 没错 都是一样的代码 就在第八张图片的时候出现了

  • Android App软件框架搭建

    1 App软件框架搭建 1 0软件基本架构 1 1创建MainActivity并设置布局文件 布局文件如下

  • 使用Android studio 查看其它app的布局的结构

    日常开发过程中 难免会遇到一些比较好看的布局 这时候我们就想学习一下别人的布局结构 以便参考 如果是前端开发的话 直接用Chrome可以查看别人布局的结构 如果是android的就比较麻烦一些 不过也是可以的 只需要简单的两步 下面来演示一

  • （一）Android布局时资源文件使用

    一 Android布局时菜单资源文件使用 Android Menu资源的使用 菜单分为三种 OptionsMenu 选项菜单 ContextMenu 上下文菜单 SubMenu 子菜单 OptionsMenu默认情况下是在点击Menu键后出

  • 解决轮播图图片大小不一的问题！

    要把大小不一样的图片做成整齐排列的轮播 如果直接固定宽高会把图片伸缩变形的 不固定又会让图片不整齐 用ps截图截成一样的大小难度系数略高 看似头大的问题 现在解决 只需2步 1 假如有4张图 我们就先写4个一样大小一样的div 给div设置

  • CSS滤镜 filter 网站灰色设置

    webkit filter grayscale 100 moz filter grayscale 100 ms filter grayscale 100 o filter grayscale 100 filter grayscale 100

  • Android——自定义LinearLayout自动换行，TextView垂直排列。

    自定义线性布局在xml中自定换行 比如你在项目中用到LinearLayout 设置水平排列android orientation horizontal 包裹button或者是TextView 但是不同分辨率的手机 不知道一行能放多少个But

  • CSS自适应

    CSS一列的自适应

  • 自定义控件玩套路以及canvas StaticLayout的使用

    遇到自定义控件的时候很苦恼 不知道从哪里下手 鄙人也是新手 记录下开发的思路 我们有时候需要把某一个功能封装成控件 很简单 写好布局 将其inflate出来 必要的属性 就跟普通的activity一样定义即可 context直接调用getC

  • QT程序自适应窗口大小

    作为QT菜鸟的一员 总是容易遇到各种问题 然后历经千辛万苦解决它 问题 我的程序需要在ARM板 Linux系统 上跑 也需要在PC Windows上 跑 他们拥有不同大小的屏幕 在程序中布局的界面能够很好地适应窗口的大小变化 但是在UI设计

  • Flex布局（一：基本概念和容器属性）

    前言 算上来快2个月没写博客呢 一是赶项目 二是中途接到一个朋友公司需要帮忙 周末都在TA们公司兼职 然后空下来就快12月初 1 Flex 传统的布局方案 基于css盒子模型 float display position TA对于很多特殊布

  • 移动端按设计图1：1布局方法

    1 为什么要写这篇教程 移动端布局大多数前端工程师使用的是百分比布局 然而百分比布局造成了很多问题 比如图片在不同分辨率下会有变形的问题 高度需要按照分辨率去兼容适配等等 今天给大家分享的这种布局方式 可以摈弃百分比布局 直接根据设计图1

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

    本文仅供参考 首先你要掌握的基础知识 row 行概念

  • Android Fragment 真正的完全解析（下）

    本篇将介绍上篇博客提到的 如何管理Fragment回退栈 Fragment如何与Activity交互 Fragment与Activity交互的最佳实践 没有视图的Fragment的用处 使用Fragment创建对话框 如何与ActionBa

随机推荐

热门标签