Vue好看的组件库:Element

文章目录

        • 1、什么是Element
        • 2、Element快速入门
        • 3、Element布局
          • 3.1、 Layout 局部
          • 3.2、容器布局

1、什么是Element

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页

Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮,上图右边的是 Element 提供的页面效果,效果一目了然。

image-20240124182555333

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改,官网网址是

https://element.eleme.cn/#/zh-CN

进入官网能看到如下页面

image-20210831171456559

接下来直接点击 组件 ,页面如下

image-20210831171552844

2、Element快速入门

使用流程:

  1. 创建页面,并在页面引入Element 的css、js文件 和 Vue.js

    <script src="vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
  2. .创建Vue核心对象

    Element 是基于 Vue 的,所以使用Element时必须要创建 Vue 对象

    <script>new Vue({el:"#app"})
    </script>
    
  3. 官网复制Element组件代码

在这里插入图片描述

在左菜单栏找到 Button 按钮 ,然后找到自己喜欢的按钮样式,点击 显示代码 ,在下面就会展示出对应的代码,将这些代码拷贝到我们自己的页面即可。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>容器布局</title><script src="../js/vue.js"></script><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="../element-ui/lib/index.js"></script></head>
<body><div id="div"><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><el-row><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><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><el-row><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></el-row></div>
</body>
<script>new Vue({el:"#div"});
</script>
</html>
3、Element布局

Element 提供了两种布局方式,分别是:

  • Layout 布局
  • Container 布局容器
3.1、 Layout 局部

通过基础的 24 分栏,迅速简便地创建布局。也就是默认将一行分为 24 栏,根据页面要求给每一列设置所占的栏数。

image-20210831182349672

在左菜单栏找到 Layout 布局 ,然后找到自己喜欢的按钮样式,点击 显示代码 ,在下面就会展示出对应的代码,显示出的代码中有样式,有html标签。将样式拷贝我们自己页面的 head 标签内,将html标签拷贝到 <div id="app"></div> 标签内。

整体页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础布局</title><script src="../js/vue.js"></script><script src="../element-ui/lib/index.js"></script><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><style>.el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;}}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}</style></head>
<body><div id="div"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row></div>
</body>
<script>new Vue({el:"#div"});
</script>
</html>
3.2、容器布局

用于布局的容器组件,方便快速搭建页面的基本结构:

<el-container>:外层容器。当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

<el-header>:顶栏容器。

<el-aside>:侧边栏容器。

<el-main>:主要区域容器。

<el-footer>:底栏容器。

如下图是官网提供的 Container 布局容器实例:

image-20210831183433892

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中;将html标签拷贝到 <div id="app"></div> 标签中,再将数据模型拷贝到 vue 对象的 data() 中。

整体页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>容器布局</title><script src="../js/vue.js"></script><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="../element-ui/lib/index.js"></script><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}</style>
</head>
<body><div id="div"><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container></el-container><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container><el-container><el-aside width="200px">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>
</body>
<script>new Vue({el:"#div"});
</script>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么隐藏磁盘或U盘分区?

隐藏分区需求确实存在&#xff01; 某用户将自己的U盘驱动器分为两个分区&#xff0c;一个是可引导的活动主分区&#xff0c;另一个分区包含服务包和其他用于技术支持的内容&#xff0c;他一直被以下两个问题所困扰&#xff1a; 是否可以隐藏U盘分区&#xff1f; 如果想更改内…

关于Spring和缓存雪崩、穿透、击穿、预热的最常见的十道面试题

面试题一&#xff1a;什么是缓存雪崩&#xff1f;如何解决缓存雪崩&#xff1f; 缓存雪崩指的是在短时间内&#xff0c;有大量的请求直接查询术后句酷&#xff0c;从而对数据库造成大量的压力&#xff0c;严重情况下可能导致数据库宕机的情况叫做缓存雪崩 我们可以看一下正常…

【CANoe使用大全】——DBC数据库制作

文章目录 1.DBC数据库选择1.1.DBC模板选择1.3. 新建报文1.4. 新建信号1.5.数值表建立 2. DBC导入 1.DBC数据库选择 首先找到DBC编辑器入口 1.1.DBC模板选择 举例说明&#xff1a; 新建选择CANFD的模板 1.3. 新建报文 注意上图中报文周期“Cycle Time”处于不可编辑状态…

初探二分法

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读题目解法一解法二 题目 题目&#xff1a;给定一个 n 个元素有序的&#xff0…

BGP路由反射-数据中心IDC项目经验

一、背景描述 R1,R2,R3在AS200区域内&#xff0c;R1和R2,R1和R3建立OSPF&#xff0c;宣告接口互联. AS200区域内&#xff0c;R1和R2建立IBGP, R1和R3建立IBGP R2和R4建立EBGP, R3和R5建立EBGP。 网络拓扑&#xff1a; 二、故障现象 R1和R2可以收到来自AS100区域R4的E…

nsenter比docker exec更底层的命令

文章目录 nsenter介绍安装方法简单使用 nsenter介绍 nsenter命令是一个可以在指定进程的命令空间下运行指定程序的命令。它位于util-linux包中。典型的用途就是进入容器的网络命令空间。相当多的容器为了轻量级&#xff0c;是不包含较为基础的命令的&#xff0c;比如说ip addr…

系统移植,GNU命令,Uboot移植

一.GNU命令 1、addr2line 把程序地址转换为文件名和行号 做调试 2、ar 建立&#xff0c;修改&#xff0c;提取归档文件 3、Id:GNU arm-none-linux-gnueabi-ld start.o main.o -Tmap.lds -o uart.elf 链接器 4、as 主要用来编译GNU编译器gcc输出的汇编文件&a…

嵌入式-stm32-江科大-EXTI外部中断

一&#xff1a;EXTI外部中断&#xff08;external interrupt&#xff09; 1.1 STM32 中断系统 中断是指在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前的程序&#xff0c;转而去处理中断程序&#xff0c;…

字符金字塔(C语言刷题)

个人博客主页&#xff1a;https://blog.csdn.net/2301_79293429?typeblog 专栏&#xff1a;https://blog.csdn.net/2301_79293429/category_12545690.html 题目描述 请打印输出一个字符金字塔&#xff0c;字符金字塔的特征请参考样例 输入描述: 输入一个字母&#xff0c;保…

5.6 误差相关统计与计算

文章目录 1、平均值2、首次作为参考基准3、绝对差值4、方差、均方差、CV值4.1 方差&#xff08;variance&#xff09;4.2 均方差、标准差&#xff08;Standard Deviation&#xff09;4.3 CV值 1、平均值 Excel 公式&#xff1a;AVERAGE(C4:C20) 2、首次作为参考基准 Excel 操作…

ITSS服务工程师:开启IT职业生涯的金钥匙

&#x1f525;ITSS是中国电子技术标准化研究院推出的&#xff0c;涵盖了“IT服务工程师”和“IT服务经理”的系列培训。它不仅满足GB/T 28827.1的符合性评估要求&#xff0c;还助力IT服务资质升级。 &#x1f3af;“IT服务工程师”培训从服务技术、服务技巧和服务规范三大板块&…

java复习篇 数据结构:链表第二节 哨兵

目录 单向链表哨兵 初始 头插 思路 代码 尾插 思路 遍历 遍历验证头插 尾插代码 尾插测试 get 思路 代码 测试 insert 思路 代码 测试 remove 移除头结点 提问 移除指定位置 测试 单向链表哨兵 单向链表里面有一个特殊的节点称为哨兵节点&#xff0c;…

C# AsyncLocal 是如何实现 Thread 间传值

一&#xff1a;背景 1. 讲故事 这个问题的由来是在.NET高级调试训练营第十期分享ThreadStatic底层玩法的时候&#xff0c;有朋友提出了AsyncLocal是如何实现的&#xff0c;虽然做了口头上的表述&#xff0c;但总还是会不具体&#xff0c;所以觉得有必要用文字图表的方式来系统…

强化数据资产管理,迎接数据资产 “入表” 新时代

2024年伊始&#xff0c;数据要素产业利好政策密集出台&#xff0c;数据资产“入表”成为了大势所趋。数据要素顶层设计方案加速落地&#xff0c;推动企业数字化转型提档加速&#xff0c;提升数据管理能力、实现数据资产价值成为企业下一阶段核心竞争力构建的关键。 01 数据资产…

pytorch与tensorflow如何选择?

目录 1.动态图和静态图1.1 tensorflow是静态图1.2 pytorch动态图 2. 易用性3. 编程语言4. 性能和扩展性5. 社区支持和生态系统 1.动态图和静态图 1.1 tensorflow是静态图 如上图&#xff1a; 定义计算图&#xff08;公式&#xff0c;包括定义变量x,y ,zx*y&#xff09;给公式…

Docker中安装 RabbitMQ

1、下载 RabbitMQ 镜像 下载最新版本的镜像&#xff1a; docker pull rabbitmq更多版本的镜像可以访问 Docker 官网&#xff1a;https://hub.docker.com/_/rabbitmq?tabtags 2、创建并运行 RabbitMQ 容器 启动命令&#xff1a; docker run -d -p 15672:15672 -p 5672:567…

垃圾回收小程序:环保与便捷的完美结合

一、引言 随着科技的发展&#xff0c;移动应用程序已经成为人们日常生活中不可或缺的一部分。其中&#xff0c;废品回收小程序以其独特的价值和功能&#xff0c;日益受到人们的关注和青睐。本文将探讨废品回收小程序开发的重要性、功能特点、技术实现和未来发展趋势。 二、废…

爬虫笔记(二):实战58二手房

第一&#xff1a;给大家推荐一个爬虫的网课哈&#xff0c;码起来 第二&#xff1a;今夜主题&#xff1a;通过xpath爬取58二手房的title信息&#xff0c;也就是标红的位置~ 第三&#xff1a;先分析一波title所在的位置 打开按下f12打开抓包工具&#xff0c;即可看到网站的源码…

JVM-初始JVM

什么是JVM JVM 全称是 Java Virtual Machine&#xff0c;中文译名 Java虚拟机。JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 Java源代码执行流程如下&#xff1a; JVM的功能 1 - 解释和运行 2 - 内存管理 3 - 即时编译 解释和运行 解释…

【二】车载FrameWork添加系统服务

自定义系统服务 常见的AMS、PWS、WMS等等都是系统服务&#xff0c;运行于system_server进程&#xff0c;并且向servicemanager进程注册其Binder以便其他进程获取binder与对应的服务进行通信。为了新增自定义系统服务&#xff0c;我们可以参考AMS等原生系统服务编写如下文件&am…