border-radius 边界半径

margin-bottom 页边距底部

grid-content 网格内容

min-height 最小高度

padding 凑篇幅的文字

gutter 檐沟（属性来指定每一栏之间的间隔，默认间隔为 0）

submenu 子菜单

slot n.狭槽;(投放或插入东西的)窄缝，扁口;(名单、日程安排或广播节目表中的)位置，时间，机会；v.投放;插入;(被)塞进;(被)装入

<el-row :gutter="20"><el-col :span="16"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数

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

通过 flex 布局来对分栏进行灵活的对齐。将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

<el-row type="flex" class="row-bg"><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>

bootstrap loader 引导加载程序

loader 装货的人，装货设备，装弹机;装板机

响应式布局（参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl）

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

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

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

包含的类名及其含义为：
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 尺寸时隐藏

Container 布局容器

：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。
用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer>
</el-container>

实例

 <el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu>

dropdown 下拉列表

prop 道具;支柱;支撑物;支持者;后盾;支柱前锋

 <el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container>
</el-container>

export 出口;输出;

<script>export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}};
</script>

Typography 字体

字号

line-height:1 无行高
line-height:1.3 紧凑
line-height:1.5 常规
line-height:1.7 宽松

Font-family 代码

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

Border 边框

Icon 图标（直接通过设置类名为 el-icon-iconName 来使用即可）

Button 按钮（基础用法，禁用状态，文字按钮，图标按钮，按钮组，加载中，不同尺寸）

使用type（类型）、plain（是否朴素按钮）、round（是否圆角按钮）和circle（是否圆形按钮）属性来定义 Button 的样式。

<el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button>
</el-row>

<el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

<el-row><el-button plain disabled>朴素按钮</el-button><el-button type="primary" plain disabled>主要按钮</el-button>
</el-row>

文字按钮

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>

图标按钮（设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标）

<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

按钮组（使用标签来嵌套你的按钮）

<el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一页</el-button><el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

加载中（要设置为 loading 状态，只要设置loading属性为true即可）

<el-button type="primary" :loading="true">加载中</el-button>

不同尺寸（额外的尺寸：medium、small、mini，通过设置size属性来配置它们）

<el-row><el-button>默认按钮</el-button><el-button size="medium">中等按钮</el-button><el-button size="small">小型按钮</el-button><el-button size="mini">超小按钮</el-button>
</el-row>
<el-row><el-button round>默认按钮</el-button><el-button size="medium" round>中等按钮</el-button><el-button size="small" round>小型按钮</el-button><el-button size="mini" round>超小按钮</el-button>
</el-row>

Link 文字链接

<div><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link>
</div>

<div><el-link :underline="false">无下划线</el-link><el-link>有下划线</el-link>
</div>

<div><el-link icon="el-icon-edit">编辑</el-link><el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>

Radio 单选框（由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。）

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean

<template><el-radio v-model="radio" label="1">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio>
</template><script>export default {data () {return {radio: '1'};}}
</script>

禁用

只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用

<template><el-radio disabled v-model="radio" label="禁用">备选项</el-radio><el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
</template><script>export default {data () {return {radio: '选中且禁用'};}}
</script>

单选框组(结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value)

<template><el-radio-group v-model="radio"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio></el-radio-group>
</template><script>export default {data () {return {radio: 3};}}
</script>

按钮样式(只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性)

<template><div><el-radio-group v-model="radio1"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio2" size="medium"><el-radio-button label="上海" ></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京" disabled ></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" disabled size="mini"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div>
</template><script>export default {data () {return {radio1: '上海',radio2: '上海',radio3: '上海',radio4: '上海'};}}
</script>

设置border属性可以渲染为带有边框的单选框

<template><div><el-radio v-model="radio1" label="1" border>备选项1</el-radio><el-radio v-model="radio1" label="2" border>备选项2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio><el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border disabled>备选项2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border>备选项2</el-radio></el-radio-group></div>
</template><script>export default {data () {return {radio1: '1',radio2: '1',radio3: '1',radio4: '1'};}}
</script>

Element Ui 学习笔记(部分)相关推荐

UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自 ...
Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用技术qq交流群:CreDream:251572072 1.使用之前导入文件: 这里用jquery-easyui-1.2.6 ...
Ui学习笔记---EasyUI的介绍
Ui学习笔记---EasyUI的介绍 -------------------------- 1.组织: a.EasyUI官方:http://www.jeasyui.com EasyUI是一 ...
Element UI学习记录之布局
目录 Element UI学习记录之布局一.Layout布局二.Container布局容器 Element UI学习记录之布局一.Layout布局基本概念:一行通过分割为24栅格栏进行布局,如 ...
Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能. 在有限空间内,循环播放同一类型的图片.文字等内容. 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法. 1.基础用法 1.默认 ...
vue element UI 学习总结笔记（九）_ 导航菜单与路由
获取用户信息我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息. router.beforeEach((to, from, next) => {if ( ...
element UI 学习
记录下,自己搭建这个网站(古典小说网) 初始elementUI版本的过程目录一.搭建环境 1.引入JS .CSS 2.VUE 二.布局三.导航 1.参考官网导航介绍,设置自己的导航 2.发现有 ...
基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...

Element Ui 学习笔记(部分)