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; 如果想更改内…

10.docker卷

Docker Volume ​Docker Volume 是 docker的数据卷&#xff0c;用于保持数据持久化。MySQL运行在Docker容器中时&#xff0c;一般将数据通过Docker Volume保存在主机上&#xff0c;即使删除MySQL容器&#xff0c;数据不会丢失。 MySQL Dockerfile 找到docker hub上的mysql 5…

QEMU搭建arm虚拟机开发环境

获取QEMU代码 git clone https://gitlab.com/qemu-project/qemu.git 切换对应的工程分支 使用git指令切换到对应的分支上&#xff0c;我这里使用的是stable-4.0的分支 git checkout -b stable-4.0 remotes/origin/stable-4.0 配置&编译 在工程的根目录下执行 ./conf…

关于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…

C语言常见面试题:什么是条件编译,条件编译的作用是什么?

条件编译是一种编程技术&#xff0c;它允许程序员根据不同的条件来选择性地编译源代码中的部分内容。条件编译在编译过程中起到了非常重要的作用&#xff0c;它可以根据不同的条件来生成不同的代码&#xff0c;从而实现更加灵活和高效的代码生成。 条件编译的作用主要有以下几…

kotlin中的初始化问题纪录

1. init 代码块的顺序问题 init代码块和成员变量实质上是按先后顺序执行的。若果init{} 中有成员变量使用。要把成员变量放到代码块之前。 2. init代码块之中的函数问题 下面是一段错误的代码&#xff1a; class mkotlin{val info:Stringinit {getInfoMethod()info "adad…

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…

‘HEAD‘ 是 HTTP 请求的一种方法

一、名词解释 ‘HEAD’ 是 HTTP 请求的一种方法&#xff0c;它与 ‘GET’ 方法类似&#xff0c;但有一些关键区别。 当你使用 ‘GET’ 请求时&#xff0c;服务器会返回请求的资源&#xff08;例如 HTML 页面或文件内容&#xff09;。而当你使用 ‘HEAD’ 请求时&#xff0c;服务…

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

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

【Rust】第六节:结构体

0 前言 结构体&#xff0c;struct&#xff0c;听到这个名字大家可能会感觉“哇&#xff01;好熟悉&#xff01;”&#xff0c;毕竟在大学时学习c/cpp的时候已经接触过很多次了&#xff0c;实际上也确实很类似&#xff0c;即使有些不同&#xff0c;比如“所有权系统”&#xff…

字符金字塔(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 操作…

docker面试题(一)

问题1&#xff1a;Docker的工作原理是什么&#xff1f; 答案1&#xff1a;Docker利用Linux内核的容器化技术&#xff0c;如命名空间&#xff08;namespaces&#xff09;和控制&#xff08;cgroups&#xff09;&#xff0c;来实现应用程序的隔离和封装。它使用镜像作为构建和分…

02.Elasticsearch应用(二)

Elasticsearch应用&#xff08;二&#xff09; 1.ElasticSearch-head 参考链接 https://github.com/mobz/elasticsearch-head 是什么 ElasticSearch可视化工具&#xff0c;跟Kibana差不多 四种运行方式 第一种&#xff1a;使用内置服务器运行 git clone git://github.c…

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

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

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

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