001_Layout布局

自由与束缚JavaJavaScript

已于 2022-02-18 21:26:41 修改

阅读量999

点赞数

分类专栏： element-ui 文章标签：前端

于 2022-02-15 20:59:15 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/122951962

版权

element-ui 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

1. 使用图形化界面的方式创建项目

1.1. 使用命令vue ui, 打开图形化界面

1.2. 在浏览器中创建项目

1.3. 点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目

1.4. 起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮

1.5. 选择手动配置项目, 点击下一步按钮

1.6. 选择如下功能, 点击下一步按钮

1.7. 选择如下配置, 点击创建项目按钮

1.8. 创建项目, 不保存预设

1.9. 创建完成

2. 安装element-ui插件

2.1. 选择插件——>添加插件

2.2. 搜素vue-cli-plugin-element

2.3. 选中vue-cli-plugin-element, 点击安装vue-cli-plugin-element。

2.4. 完成安装

3. Layout布局

3.1. 通过基础的24分栏, 迅速简便地创建布局。

3.2. Row属性

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	无	0
type	布局模式, 可选flex, 现代浏览器下有效	string	无	无
justify	flex布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex布局下的垂直排列方式	string	top/middle/bottom	无
tag	自定义元素标签	string	*	div

3.3. Col属性

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	无	24
offset	栅格左侧的间隔格数	number	无	0
push	栅格向右移动格数	number	无	0
pull	栅格向左移动格数	number	无	0
xs	<768px响应式栅格数或者栅格属性对象	number/object(例如： {span: 4, offset: 4})	无	无
sm	≥768px响应式栅格数或者栅格属性对象	number/object(例如： {span: 4, offset: 4})	无	无
md	≥992px响应式栅格数或者栅格属性对象	number/object(例如： {span: 4, offset: 4})	无	无
lg	≥1200px响应式栅格数或者栅格属性对象	number/object(例如： {span: 4, offset: 4})	无	无
xl	≥1920px响应式栅格数或者栅格属性对象	number/object(例如： {span: 4, offset: 4})	无	无
tag	自定义元素标签	string	*	div

4. 隐藏类

4.1. Element额外提供了一系列类名, 用于在某些条件下隐藏元素。这些类名可以添加在任何DOM元素或自定义组件上。如果需要, 请自行引入以下文件:

import 'element-ui/lib/theme-chalk/display.css';

4.2. 包含的类名及其含义为:

hidden-xs-only: 当视口在xs尺寸时隐藏。
hidden-sm-only: 当视口在sm尺寸时隐藏。
hidden-sm-and-down: 当视口在sm及以下尺寸时隐藏。
hidden-sm-and-up: 当视口在sm及以上尺寸时隐藏。
hidden-md-only: 当视口在md尺寸时隐藏。
hidden-md-and-down: 当视口在md及以下尺寸时隐藏。
hidden-md-and-up: 当视口在md及以上尺寸时隐藏。
hidden-lg-only: 当视口在lg尺寸时隐藏。
hidden-lg-and-down: 当视口在lg及以下尺寸时隐藏。
hidden-lg-and-up: 当视口在lg及以上尺寸时隐藏。
hidden-xl-only: 当视口在xl尺寸时隐藏。

5. Layout布局例子

5.1. 使用脚手架新建一个名为element-ui-layout的前端项目, 同时安装Element插件。

5.2. 在components下创建BaseGrid.vue

<template>
  <div>
    <h1>基础布局-使用单一分栏创建基础的栅格布局</h1>
    <h4>通过row和col组件, 并通过col组件的span属性我们就可以自由地组合布局。</h4>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

5.3. 在components下创建GutterGrid.vue

<template>
  <div>
    <h1>分栏间隔-分栏之间存在间隔</h1>
    <h4>Row组件提供gutter属性来指定每一栏之间的间隔, 默认间隔为0。</h4>
    <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-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>
  </div>
</template>

5.4. 在components下创建OffsetGrid.vue

<template>
  <div>
    <h1>分栏偏移-支持偏移指定的栏数</h1>
    <h4>通过制定col组件的offset属性可以指定分栏偏移的栏数。</h4>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

5.5. 在components下创建JustifyGrid.vue

<template>
  <div>
    <h1>对齐方式-通过flex布局来对分栏进行灵活的对齐</h1>
    <h4>将type属性赋值为'flex', 可以启用flex布局, 并可通过justify属性来指定start, center, end, space-between, space-around其中的值来定义子元素的排版方式。</h4>
    <el-row type="flex" class="row-bg" style="height: 100px;" align="bottom">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

5.6. 在components下创建ResponseGrid.vue

<template>
  <div>
    <h1>响应式布局-根据屏幕宽度进行响应式</h1>
    <h4>参照了Bootstrap的响应式设计, 预设了五个响应尺寸: xs、sm、md、lg和xl。</h4>
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

5.7. 编写App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  #app {
    margin: 0 auto;
    width: 90%;
    border: 1px solid black;
  }
  h1 {
    text-align: center;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

5.8. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import BaseGrid from '../components/BaseGrid.vue'
import GutterGrid from '../components/GutterGrid.vue'
import OffsetGrid from '../components/OffsetGrid.vue'
import JustifyGrid from '../components/JustifyGrid.vue'
import ResponseGrid from '../components/ResponseGrid.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/BaseGrid' },
  { path: '/BaseGrid', component: BaseGrid },
  { path: '/GutterGrid', component: GutterGrid },
  { path: '/OffsetGrid', component: OffsetGrid },
  { path: '/JustifyGrid', component: JustifyGrid },
  { path: '/ResponseGrid', component: ResponseGrid }
]

const router = new VueRouter({
  routes
})

export default router

5.9. 运行项目, 访问http://localhost:8080/#/BaseGrid

5.10. 运行项目, 访问http://localhost:8080/#/GutterGrid

5.11. 运行项目, 访问http://localhost:8080/#/OffsetGrid

5.12. 运行项目, 访问http://localhost:8080/#/JustifyGrid

5.13. 运行项目, 访问http://localhost:8080/#/ResponseGrid, 屏幕款为xl

5.14. 运行项目, 访问http://localhost:8080/#/ResponseGrid, 调整屏幕款为xs

5.15. 运行项目, 访问http://localhost:8080/#/ResponseGrid, 调整屏幕款为sm

5.16. 运行项目, 访问http://localhost:8080/#/ResponseGrid, 调整屏幕款为md

5.17. 运行项目, 访问http://localhost:8080/#/ResponseGrid, 调整屏幕款为lg

自由与束缚JavaJavaScript

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
001_Layout布局

1. 使用图形化界面的方式创建项目1.1. 使用命令vue ui, 打开图形化界面1.2.在浏览器中创建项目1.3.点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目1.4.起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮1.5.选择手动配置项目, 点击下一步按钮1.6.选择如下功能, 点击下一步按钮1.7.选择如下配置, 点击创建项目按钮1.8.创建项目, 不保存预设1....
复制链接

扫一扫

专栏目录