羊村懒王

这个屌丝很懒，什么也没留下！

热门标签

Element UI框架学习篇(二)_el框架

作者：羊村懒王 | 2024-05-06 05:24:01

踩

el框架

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
3
4
5
6
7

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

1.4.3 运行截图

在这里插入图片描述

2.按钮的几种用法

2.1 常规显示按钮颜色

2.1.1 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.1.3 运行截图

在这里插入图片描述

2.2 悬停显示按钮颜色

2.2.1 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.2.3 运行截图

a 初次进入页面时的按钮

在这里插入图片描述

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

在这里插入图片描述

2.3 圆角按钮

2.3.1 核心点

在el-button标签里面写round
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.3.3 运行截图

在这里插入图片描述

2.4 与图标结合成圆形按钮

2.4.1 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.4.3 运行截图

在这里插入图片描述

2.5 带文字的图标按钮

2.5.1 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.5.3 运行截图

在这里插入图片描述

2.6 按钮组

2.6.1 文字按钮组

a 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

c 运行截图

在这里插入图片描述

2.6.2 图标按钮组

a 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

c 运行截图

在这里插入图片描述

2.7 特殊状态

2.7.1 按钮上显示加载状态

a 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

c 运行截图

在这里插入图片描述

2.7.2 点击按钮清空表单

a 核心点

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

c 运行截图

c.1 初次进入的页面

在这里插入图片描述

c.2 点击重置后的页面

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/542696