Element UI框架学习篇(二)
1 整体布局
1.1 前提说明
el-container标签里面的标签默认是从左往右排列,若想要从上往下排列,只需要写el-header或者el-footer就行了
<el-container>：外层容器
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
1.2 从左往右布局
1.2.1 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>整体布局之从左往右布局</title><style>.el-aside{background-color: sandybrown;}.el-main{height: 300px;background-color: darkcyan;}body{margin:0;}</style></head><body><!-- 复制过来改 --><!--elementui只能在挂载元素对应的标签里面使用 --><divid="app"><!--el-header footer从上到下布局 无就是从左到右--><el-container><el-aside>左边</el-aside><!-- 需要啥再对应部分套上啥 --><el-main>
中间
</el-main><el-aside>右边</el-aside></el-container></div><script>newVue({el:"#app",})</script></body></html>
1.2.2 运行截图
1.3 从上往下布局
1.3.1 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>整体布局之从上往下布局</title><style>.el-header{height: 100px;background-color: sandybrown;}.el-main{height: 300px;background-color: darkcyan;}.el-footer{height: 100px;background-color: sandybrown;}body{margin:0;}</style></head><body><!-- 复制过来改 --><!--elementui只能在挂载元素对应的标签里面使用 --><divid="app"><!--el-header footer从上到下布局 无就是从左到右--><el-container><el-header>上边</el-header><!-- 需要啥再对应部分套上啥 --><el-main>
中间
</el-main><el-footer>下边</el-footer></el-container></div><script>newVue({el:"#app",})</script></body></html>
1.3.2 运行截图
1.4 作业练习
1.4.1 通过整体布局完成如下图所示的结构
1.4.2 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>整体布局练习</title><style>.el-header{background-color: sandybrown;}.el-main{height: 300px;background-color: darkcyan;}.el-footer{background-color: yellow;}.el-aside{background-color: blueviolet;}body{margin:0px;}</style></head><body><divid="app"><!--el-header footer从上到下布局 无就是从左到右--><el-container><el-aside>
aside
</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>footer</el-footer></el-container></el-container></div><script>newVue({el:"#app",})</script></body></html>
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 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>常规显示按钮颜色</title></head><body><divid="app"><el-row><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button></el-row></div><script>newVue({el:"#app"})</script></body></html>
2.1.3 运行截图
2.2 悬停显示按钮颜色
2.2.1 核心点
在el-button标签里面加上plain,代表背景透明
2.2.2 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>按钮之悬停显示颜色</title></head><body><divid="app"><el-row><!-- 加上plain代表背景透明 --><el-buttonplain>默认按钮</el-button><el-buttontype="primary"plain>主要按钮</el-button><el-buttontype="success"plain>成功按钮</el-button><el-buttontype="info"plain>信息按钮</el-button><el-buttontype="warning"plain>警告按钮</el-button><el-buttontype="danger"plain>危险按钮</el-button></el-row></div><script>newVue({el:"#app"})</script></body></html>
2.2.3 运行截图
a 初次进入页面时的按钮
b 当鼠标悬停在主要按钮上时
2.3 圆角按钮
2.3.1 核心点
在el-button标签里面写round
2.3.2 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>按钮之圆角按钮</title></head><body><divid="app"><el-row><el-buttonround>默认按钮</el-button><el-buttontype="primary"round>主要按钮</el-button><el-buttontype="success"round>成功按钮</el-button><el-buttontype="info"round>信息按钮</el-button><el-buttontype="warning"round>警告按钮</el-button><el-buttontype="danger"round>危险按钮</el-button></el-row></div><script>newVue({el:"#app"})</script></body></html>
2.3.3 运行截图
2.4 与图标结合成圆形按钮
2.4.1 核心点
①在el-button标签里面写circle
②在el=button标签中写上icon="图标名"
③也可以通过type属性来更改button的颜色
2.4.2 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>与图标集合形成圆形按钮</title></head><body><divid="app"><el-buttonicon="el-icon-search"circle></el-button><el-buttontype="primary"icon="el-icon-edit"circle></el-button><el-buttontype="success"icon="el-icon-check"circle></el-button><el-buttontype="info"icon="el-icon-message"circle></el-button><el-buttontype="warning"icon="el-icon-star-off"circle></el-button><el-buttontype="danger"icon="el-icon-delete"circle></el-button></div><script>newVue({el:"#app"})</script></body></html>
2.4.3 运行截图
2.5 带文字的图标按钮
2.5.1 核心点
在按钮中带文字可以采用icon="图标名"或者<i class="图标名"></i>这两种方式
需要通过el-icon--方向来控制间距
i在文字左边 使用el-icon--left,i在文字右边 使用el-icon--right(注意icon后面是两个-)
2.5.2 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>带文字的图标按钮</title></head><body><divid="app"><el-buttontype="primary"icon="el-icon-search">搜索</el-button><el-buttontype="primary">上传<iclass="el-icon-upload el-icon--right"></i></el-button></div><script>newVue({el:"#app"})</script></body></html>
2.5.3 运行截图
2.6 按钮组
2.6.1 文字按钮组
a 核心点
把el-button放入el-button-group中即成一组
b 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>带文字的按钮组</title></head><body><divid="app"><el-button-group><el-buttontype="info"icon="el-icon-arrow-left">上一页</el-button><el-buttontype="info">下一页<iclass="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div><script>newVue({el:"#app"})</script></body></html>
c 运行截图
2.6.2 图标按钮组
a 核心点
把el-button放入el-button-group中即成一组
图标是以作为el-button标签中的icon属性去设置的
b 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>带图标的按钮组</title></head><body><divid="app"><el-button-group><el-buttontype="primary"icon="el-icon-edit"></el-button><el-buttontype="primary"icon="el-icon-share"></el-button><el-buttontype="primary"icon="el-icon-delete"></el-button></el-button-group></div><script>newVue({el:"#app"})</script></body></html>
c 运行截图
2.7 特殊状态
2.7.1 按钮上显示加载状态
a 核心点
在el-button标签里面写:loading="true"就能显示加载中状态
通常用于数据的加载
b 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>按钮显示加载中状态</title></head><body><divid="app"><el-buttontype="primary":loading="true">加载中</el-button></div><script>newVue({el:"#app"})</script></body></html>
c 运行截图
2.7.2 点击按钮清空表单
a 核心点
在el-button标签中,设置native-type属性,若为submit就是提交,为reset就是重置(清空),不写这个属性默认就是button普通按钮
b 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="../elementUI/elementUI.min.css"><scriptsrc="../js/vue.js"></script><scriptsrc="../elementUI/elementUI.min.js"></script><title>按钮提交表单</title></head><body><divid="app"><el-form><el-inputplaceholder="请输入账户"value="张三"style="width: 300px;"></el-input><br><el-inputplaceholder="请输入密码"show-passwordvalue="123456"type="password"style="width: 300px;"></el-input><br><el-buttontype="primary"native-type="reset">重置</el-button></el-form></div><script>newVue({el:"#app"})</script></body></html>
c 运行截图
c.1 初次进入的页面
c.2 点击重置后的页面
本文转载自: https://blog.csdn.net/SSS4362/article/details/128959785
版权归原作者 SSS4362 所有， 如有侵权，请联系我们删除。
版权归原作者 SSS4362 所有， 如有侵权，请联系我们删除。