Element UI框架学习篇(二)

news2024/11/26 19:23:08

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 点击重置后的页面

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/332993.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android框架源码分析——从设计模式角度看 Retrofit 核心源码

Android框架源码分析——从设计模式角度看 Retrofit 核心源码

Android框架源码分析——从设计模式角度看 Retrofit 核心源码 Retrofit中用到了许多常见的设计模式&#xff1a;代理模式、外观模式、构建者模式等。我们将从这三种设计模式入手&#xff0c;分析 Retrofit2 的核心源码。 1. 宏观 Retrofit 是一个外观模式的设计 外观模式&am…
阅读更多...
Intel处理器分页机制

Intel处理器分页机制

分页模式 Intel 64位处理器支持3种分页模式&#xff1a; 32-bit分页PAE分页IA-32e分页 32-bit分页 32-bit分页模式支持两种页面大小&#xff1a;4KB以及4MB。 4KB页面的线性地址转换 4MB页面的线性地址转换 PAE分页模式 PAE分页模式支持两种页面大小&#xff1a;4KB以及…
阅读更多...
Java 验证二叉搜索树

Java 验证二叉搜索树

验证二叉搜索树中等给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。有效 二叉搜索树定义如下&#xff1a;节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。示例 1&…
阅读更多...
ChatGPT注册流程攻略，含验证码接收（图文步骤）

ChatGPT注册流程攻略，含验证码接收（图文步骤）

本文给大家分享一下我成功注册的流程&#xff01; 其实方法都类似&#xff0c;若无海外手机号码可用接验证码的平台&#xff08;ps&#xff1a;我之前使用的是SMS-Activate&#xff09; 必要准备 能够科学上网&#xff08;并且全局模式&#xff09; 能确认登录的电子邮箱&…
阅读更多...
ffmpeg硬解码与软解码的压测对比

ffmpeg硬解码与软解码的压测对比

文章目录ffmpeg硬解码与软解码的压测一、基本知识二、压测实验1. 实验条件及工具说明2. 压测脚本3. 实验数据结果ffmpeg硬解码与软解码的压测 一、基本知识 本文基于intel集显进行压测 软解码&#xff1a;cpu对视频进行解码硬解码&#xff1a;显卡或者多媒体处理芯片对视频进…
阅读更多...
Python编程自动化办公案例（1）

Python编程自动化办公案例（1）

作者简介&#xff1a;一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.使用库讲解 1.xlrd 2.xlwt 二.主要案例 1.批量合并 模板如下&#xf…
阅读更多...
Python 如何快速搭建环境？

Python 如何快速搭建环境？

Python可应用于多平台包括 Linux 和 Mac OS X。 你可以通过终端窗口输入 “python” 命令来查看本地是否已经安装Python以及Python的安装版本。 Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, SunOS, IRIX, 等等。) Win 9x/NT/2000 Macintosh (Intel, PPC, 68K) OS/2 DOS (多个…
阅读更多...
67. Python的绝对路径

67. Python的绝对路径

67. Python的绝对路径 文章目录67. Python的绝对路径1. 准备工作2. 路径3. 绝对路径3.1 概念3.2 查看绝对路径的方法4. 课堂练习5. 用绝对路径读取txt文件6. 加\改写绝对路径6.1 转义字符知识回顾6.2 转义字符改写7. 总结1. 准备工作 对照下图&#xff0c;新建文件夹和txt文件…
阅读更多...
小知识点：MySQL 的 redo log、undo log、binlog 以及 Java 监控 binlog

小知识点：MySQL 的 redo log、undo log、binlog 以及 Java 监控 binlog

SQL 入库流程 服务器与 MySQL 建立连接依次经过 MySQL 服务器内存中 Server 层的分析器、优化器、执行器执行器根据执行计划操作 InnoDB 引擎InnoDB 从磁盘数据文件中将 data 读到缓冲池中修改之前&#xff0c;会写入 undo log 将 data 存起来然后将缓冲池中的 data 改成 new_d…
阅读更多...
数据结构复习（三）顺序表oj

数据结构复习（三）顺序表oj

目录 27. 移除元素 26. 删除有序数组中的重复项 88. 合并两个有序数组 27. 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外…
阅读更多...
多数据库学习之GBase8s查询数据库表元信息常用SQL

多数据库学习之GBase8s查询数据库表元信息常用SQL

多数据库学习之GBase8s查询数据库表元信息常用SQL简介常用SQL创建用户创建数据库及模式获取表元数据其他参考链接简介 背景介绍 GBase 8t是基于IBM informix源代码、编译和测试体系自主研发的交易型数据库产品。 南大通用安全数据库管理系统&#xff08;简称 GBase 8s&#xff…
阅读更多...
Linux基础命令2（常见的文件相关命令）

Linux基础命令2（常见的文件相关命令）

目录 查找文件命令 pwd 显示当前所在的工作目录&#xff08;Print working directory&#xff09; cd 切换命令&#xff08;change directory&#xff09; ls 查看目录下的文件&#xff08;list&#xff09; tree 查看目录下的子目录&#xff08;查看目录结构&#…
阅读更多...
Grafana 系列文章（十二）：如何使用Loki创建一个用于搜索日志的Grafana仪表板

Grafana 系列文章（十二）：如何使用Loki创建一个用于搜索日志的Grafana仪表板

概述 创建一个简单的 Grafana 仪表板, 以实现对日志的快速搜索. 有经验的直接用 Grafana 的 Explore 功能就可以了. 但是对于没有经验的人, 他们如何能有一个已经预设了简单的标签搜索的仪表板&#xff0c;以帮助一些团队在排除故障时快速找到他们正在寻找的东西。虽然 Expl…
阅读更多...
云仓仓储的运行模式是什么？

云仓仓储的运行模式是什么？

仓库能够简单地定义为一个规划空间&#xff0c;通常是一个用于处置和贮存货物的大型商业建筑。因而&#xff0c;仓储是指在这样一个规划空间中存储和处置货物所触及的一切过程。仓库中常见的货物包括&#xff1a;;机械零配件、建筑资料、废品农产品、家具和电子产品。仓库中的一…
阅读更多...
【面试题】经典面试题：让 a == 1 a == 2 a == 3 成立？

【面试题】经典面试题：让 a == 1 a == 2 a == 3 成立？

一、问题解析 if (a == 1 && a == 2 && a == 3) {console.log(Win) } 复制代码 如何打印除Win? 看到题目的第一眼,我是蒙蔽的.怎么可能会有如此矛盾的情况发生呢?就相当于一个人怎么可能即是小孩,又是成年人,还是老年人呢? 冷静下来,发现一些端倪。
阅读更多...
VHDL语言基础-组合逻辑电路-概述

VHDL语言基础-组合逻辑电路-概述

目录 概述&#xff1a; 组合逻辑电路&#xff1a;——电路无记忆功能 组合逻辑电路的设计方法&#xff1a; 传统的设计方法&#xff1a;采用标准组件进行设计 组合逻辑电路的设计方法&#xff1a; 两种设计方法的比较&#xff1a; 概述&#xff1a; 数字电路按其完成逻辑…
阅读更多...
[Android]图片加载库Glide

[Android]图片加载库Glide

目录 Glide的介绍 Glide的基本使用 指定图片的格式 Glide占位符 指定图片的大小 过渡动画 图片变换 Generated API Glide的介绍 Glide是一个快速高效的Android图片加载库&#xff0c;可以自动加载网络&#xff0c;本地文件&#xff0c;app资源中的文件&#xff0c;注重于平…
阅读更多...
数据存储技术复习（二）未完

数据存储技术复习（二）未完

module3存储是数据中心内的核心元素。请说明常用的存储选项及其特点。磁盘驱动器&#xff1a;具有很大的存储容量&#xff0c;随机读/写访问闪存驱动器&#xff1a;使用半导体介质&#xff0c;提供高性能&#xff0c;低功耗2&#xff0e;若某磁盘驱动器显示每个磁道有八个扇区&…
阅读更多...
标准舆情监测平台解决方案及流程，TOOM舆情监测工作计划有哪些?

标准舆情监测平台解决方案及流程，TOOM舆情监测工作计划有哪些?

舆情监测流程一般包括&#xff1a;数据收集、数据分析、信息汇报三个部分。首先&#xff0c;通过多种途径收集舆情数据&#xff0c;如网络媒体、社交媒体、博客、论坛等;其次&#xff0c;对收集的数据进行分析&#xff0c;统计舆情趋势、舆情类型等;最后&#xff0c;根据舆情分…
阅读更多...
【Java】TCP的三次握手和四次挥手

【Java】TCP的三次握手和四次挥手

三次握手 TCP三次握手是一个经典的面试题&#xff0c;它指的是TCP在传递数据之前需要进行三次交互才能正式建立连接&#xff0c;并进行数据传递。&#xff08;客户端主动发起的&#xff09;TCP之所以需要三次握手是因为TCP双方都是全双工的。 什么是全双工&#xff1f; TCP任何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023