Element UI框架学习篇(二)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI框架学习篇(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

1.4 作业练习

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

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 初次进入页面时的按钮

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 运行截图

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

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 初次进入的页面

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法

c.2 点击重置后的页面

element ui 框架,ElementUI学习篇,ElementUI,Vue2,整体布局,按钮的几种用法文章来源地址https://www.toymoban.com/news/detail-653683.html

到了这里，关于Element UI框架学习篇(二)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Element UI框架学习篇(二)