Element UI框架学习篇(二)
SSS4362
帮助1人
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 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI -->
<script src="../js/vue.js"></script>
<script src="../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只能在挂载元素对应的标签里面使用 -->
<div id="app">
<!--el-header footer从上到下布局 无就是从左到右-->
<el-container>
<el-aside>左边</el-aside>
<!-- 需要啥再对应部分套上啥 -->
<el-main>
中间
</el-main>
<el-aside>右边</el-aside>
</el-container>
</div>
<script>
new Vue({
el:"#app",
})
</script>
</body>
</html>
1.2.2 运行截图
1.3 从上往下布局
1.3.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI -->
<script src="../js/vue.js"></script>
<script src="../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只能在挂载元素对应的标签里面使用 -->
<div id="app">
<!--el-header footer从上到下布局 无就是从左到右-->
<el-container>
<el-header>上边</el-header>
<!-- 需要啥再对应部分套上啥 -->
<el-main>
中间
</el-main>
<el-footer>下边</el-footer>
</el-container>
</div>
<script>
new Vue({
el:"#app",
})
</script>
</body>
</html>
1.3.2 运行截图
1.4 作业练习
1.4.1 通过整体布局完成如下图所示的结构
1.4.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI -->
<script src="../js/vue.js"></script>
<script src="../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>
<div id="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>
new Vue({
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 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>常规显示按钮颜色</title>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
2.1.3 运行截图
2.2 悬停显示按钮颜色
2.2.1 核心点
在el-button标签里面加上plain,代表背景透明
2.2.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>按钮之悬停显示颜色</title>
</head>
<body>
<div id="app">
<el-row>
<!-- 加上plain代表背景透明 -->
<el-button plain>默认按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
2.2.3 运行截图
a 初次进入页面时的按钮
b 当鼠标悬停在主要按钮上时
2.3 圆角按钮
2.3.1 核心点
在el-button标签里面写round
2.3.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>按钮之圆角按钮</title>
</head>
<body>
<div id="app">
<el-row>
<el-button round>默认按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
2.3.3 运行截图
2.4 与图标结合成圆形按钮
2.4.1 核心点
①在el-button标签里面写circle
②在el=button标签中写上icon="图标名"
③也可以通过type属性来更改button的颜色
2.4.2 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>与图标集合形成圆形按钮</title>
</head>
<body>
<div id="app">
<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>
</div>
<script>
new Vue({
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 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>带文字的图标按钮</title>
</head>
<body>
<div id="app">
<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>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
2.5.3 运行截图
2.6 按钮组
2.6.1 文字按钮组
a 核心点
把el-button放入el-button-group中即成一组
b 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>带文字的按钮组</title>
</head>
<body>
<div id="app">
<el-button-group>
<el-button type="info" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="info">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
c 运行截图
2.6.2 图标按钮组
a 核心点
把el-button放入el-button-group中即成一组
图标是以作为el-button标签中的icon属性去设置的
b 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>带图标的按钮组</title>
</head>
<body>
<div id="app">
<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>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
c 运行截图
2.7 特殊状态
2.7.1 按钮上显示加载状态
a 核心点
在el-button标签里面写:loading="true"就能显示加载中状态
通常用于数据的加载
b 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>按钮显示加载中状态</title>
</head>
<body>
<div id="app">
<el-button type="primary" :loading="true">加载中</el-button>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
c 运行截图
2.7.2 点击按钮清空表单
a 核心点
在el-button标签中,设置native-type属性,若为submit就是提交,为reset就是重置(清空),不写这个属性默认就是button普通按钮
b 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>
<title>按钮提交表单</title>
</head>
<body>
<div id="app">
<el-form>
<el-input placeholder="请输入账户" value="张三" style="width: 300px;"></el-input><br>
<el-input placeholder="请输入密码" show-password value="123456" type="password" style="width: 300px;"></el-input><br>
<el-button type="primary" native-type="reset">重置</el-button>
</el-form>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
c 运行截图
c.1 初次进入的页面
c.2 点击重置后的页面
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhggkjij
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
