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 示例代码
aside
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 点击重置后的页面
精彩链接
您阅读本篇文章共花了：
发表评论