Element UI框架学习篇(二)

1 整体布局

1.1 前提说明

el-container标签里面的标签默认是从左往右排列,若想要从上往下排列,只需要写el-header或者el-footer就行了
：外层容器
：顶栏容器。
：侧边栏容器。
：主要区域容器。
：底栏容器。
 的子元素只能是后四者，后四者的父元素也只能是 。

1.2 从左往右布局

1.2.1 示例代码

左边中间右边

1.2.2 运行截图

1.3 从上往下布局

1.3.1 示例代码

上边中间下边

1.3.2 运行截图

1.4 作业练习

1.4.1 通过整体布局完成如下图所示的结构

1.4.2 示例代码

asideHeaderMainfooter

1.4.3 运行截图

2.按钮的几种用法

2.1 常规显示按钮颜色

2.1.1 核心点

在el-button标签里面加上type属性
当type属性值为primary,按钮颜色为蓝色
当type属性值为success,按钮颜色为绿色
当type属性值为info,按钮颜色为灰色
当type属性值为warning,按钮颜色为黄色
当type属性值为danger,按钮颜色为红色
当无type属性时,默认是空白颜色

2.1.2 示例代码

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

2.1.3 运行截图

2.2 悬停显示按钮颜色

2.2.1 核心点

在el-button标签里面加上plain,代表背景透明

2.2.2 示例代码

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

2.2.3 运行截图

a 初次进入页面时的按钮

b 当鼠标悬停在主要按钮上时

2.3 圆角按钮

2.3.1 核心点

在el-button标签里面写round

2.3.2 示例代码

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

2.3.3 运行截图

2.4 与图标结合成圆形按钮

2.4.1 核心点

①在el-button标签里面写circle
②在el=button标签中写上icon="图标名"
③也可以通过type属性来更改button的颜色

2.4.2 示例代码

2.4.3 运行截图

2.5 带文字的图标按钮

2.5.1 核心点

在按钮中带文字可以采用icon="图标名"或者这两种方式
需要通过el-icon--方向来控制间距
i在文字左边 使用el-icon--left,i在文字右边 使用el-icon--right(注意icon后面是两个-)

2.5.2 示例代码

搜索上传

2.5.3 运行截图

2.6 按钮组

2.6.1 文字按钮组

a 核心点

把el-button放入el-button-group中即成一组

b 示例代码

上一页下一页

c 运行截图

2.6.2 图标按钮组

a 核心点

把el-button放入el-button-group中即成一组
图标是以作为el-button标签中的icon属性去设置的

b 示例代码

c 运行截图

2.7 特殊状态

2.7.1 按钮上显示加载状态

a 核心点

在el-button标签里面写:loading="true"就能显示加载中状态
通常用于数据的加载

b 示例代码

加载中

c 运行截图

2.7.2 点击按钮清空表单

a 核心点

在el-button标签中,设置native-type属性,若为submit就是提交,为reset就是重置(清空),不写这个属性默认就是button普通按钮

b 示例代码

重置

c 运行截图

c.1 初次进入的页面

c.2 点击重置后的页面