element---组件

最新推荐文章于 2025-07-14 13:45:26 发布
最新推荐文章于 2025-07-14 13:45:26 发布
阅读量454 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45343973/article/details/98761014
本文详细介绍了Element UI的基础组件，包括Layout布局、Container布局容器、色彩系统、字体 Typography、边框 Border、Icon图标、Button按钮和Link文字链接的使用方法和特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Basic

一、Layout布局

  1. 基础布局
    栅格布局

    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>

<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> ```

  2. 分栏间隔
    分栏之间存在间隔

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></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"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<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>

3.响应式布局
在这里插入图片描述

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .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;
  }
</style>

二、Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<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>

<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>

三、color色彩

  1. 主色
    Element 主要品牌颜色是鲜艳、友好的蓝色。
    在这里插入图片描述

  2. 辅助色
    除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
    在这里插入图片描述

  3. 中性色
    中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
    在这里插入图片描述

四、Typography 字体

  1. 字体
    在这里插入图片描述

  2. 字号
    在这里插入图片描述

3.行高
在这里插入图片描述

  1. Font-family 代码
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

五、Border边框

  1. 边框
    在这里插入图片描述
  2. 圆角
    在这里插入图片描述
  3. 投影
    在这里插入图片描述

六、Icon图标

  1. 使用方法：
    在这里插入图片描述
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
  1. 图表集合
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

七、Button按钮

  1. 基础用法
    在这里插入图片描述
<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>
  1. 禁用状态
    在这里插入图片描述
<el-row>
  <el-button disabled>默认按钮</el-button>
  <el-button type="primary" disabled>主要按钮</el-button>
  <el-button type="success" disabled>成功按钮</el-button>
  <el-button type="info" disabled>信息按钮</el-button>
  <el-button type="warning" disabled>警告按钮</el-button>
  <el-button type="danger" disabled>危险按钮</el-button>
</el-row>

  1. 文字按钮
    在这里插入图片描述
    在这里插入图片描述

  2. 图标按钮
    在这里插入图片描述

<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 type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

5.按钮组
在这里插入图片描述

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<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>
  1. 加载中
    在这里插入图片描述
<el-button type="primary" :loading="true">加载中</el-button>
  1. 不同尺寸
    在这里插入图片描述
    在这里插入图片描述
<el-row>
  <el-button>默认按钮</el-button>
  <el-button size="medium">中等按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>

八、Link文字链接

  1. 基础用法
    在这里插入图片描述
<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>
  1. 禁用状态
    在这里插入图片描述
<div>
  <el-link disabled>默认链接</el-link>
  <el-link type="primary" disabled>主要链接</el-link>
  <el-link type="success" disabled>成功链接</el-link>
  <el-link type="warning" disabled>警告链接</el-link>
  <el-link type="danger" disabled>危险链接</el-link>
  <el-link type="info" disabled>信息链接</el-link>
</div>
  1. 下划线（文字链接下划线）
    在这里插入图片描述
<div>
  <el-link :underline="false">无下划线</el-link>
  <el-link>有下划线</el-link>
</div>
  1. 图标
    在这里插入图片描述
<div>
  <el-link icon="el-icon-edit">编辑</el-link>
  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
wyk.wyk
关注
组件element------基础组件
weixin_45343884的博客
08-07 676
（1） Layout 布局 基础布局 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><d...
element-docs::fox: 组件库文档--基于 element-ui 官方组件库
05-07
Element将与Vue 2.x一起使用 对于Vue 3.0，我们建议使用同一团队的 链接 主页和文档 法国用户 真棒元素 常问问题 Vue.js 3.0迁移 自定义主题 在线预览和生成主题 React元素 角度元素 原子助手 Visual Studio代码...
element组件
12-13
饿了吗 前端相关组件 你可以在官网下载也可以直接通过本链接直接下载
Vue 组件库：Element
最新发布
专注于技术分享的博主
07-14 844
Element 是网站快速成型工具，是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。组件：组成网页的部件，例如超链接、按钮、图片、表格等等。使用 Element 的前提是必须要有 Vue。
Element组件
qq_45848226的博客
09-14 236
https://element.eleme.cn/#/zh-CN/component/message-box
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
对 element-ui 的一些组件做的拓展自定义指令工具 使用yarn包管理 提供指令： v-select-scroll: Select 组件监听滚动，以便做懒加载 v-dialog-drag: Dialog 组件拖拽任意位置 v-dialog-drag-width: Dialog 组件拖拽...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
element-ui 2.15.14, 静态资源版本, 纯HTML可用
02-13
Element UI是一个基于Vue 2.0的桌面端组件库，致力于提供丰富的组件，以帮助开发者快速构建优雅的Web界面。2.15.14版本是Element UI的一个静态资源版本，允许开发者将Element UI的组件以静态资源的形式引入到项目中...
Element组件（基础组件和配置组件）
weixin_68915174的博客
11-20 2951
buttonbutton添加样式：2.渲染没有边框（text）和背景色（bg）的按钮添加样式同上格式：2. //在图标后面添加内容3. //在图标前面添加内容需要添加style添加color=" " :dark="isDark"js中添加Border边框Container布局容器：外层容器：顶栏容器。：侧边栏容器。：主要区域容器。
JavaWeb开发 —— Element组件
hdakj22的博客
04-12 1291
简单介绍什么是Element？、Element组件的快速入门使用以及常见组件
element组件---基础组件
weixin_45343882的博客
08-07 1315
Layout 布局 通过基础的 24 分栏，迅速简便地创建布局。 基础布局 使用单一分栏创建基础的栅格布局。 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row&...
使用element组件
qq_38432842的博客
12-13 272
1，分页数据处理 &amp;amp;lt;el-pagination background layout=&amp;quot;prev, pager, next&amp;quot; @current-change=&amp;quot;handleCurrentChange&amp;quot; :page-size=&amp;quot;9&amp;q
引用Element组件
qq_41627870的博客
03-08 977
1、按需引入： npm输入命令： npm install babel-plugin-component -D yarn输入命令 yarn add install babel-plugin-component -D 然后，将 .babelrc 修改为： 在mian.js中引入： import { &amp;lt;DatePicker, Select, Option &amp;gt;用的组件名称} from '...
element组件使用
nana525484608的博客
09-10 2150
1、el-date-picker 时间范围组件 html部分: <el-date-picker v-model="qryData.time" :type="qryData.dateStyle=='day'?'daterange':'monthrange'" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="qryData.dateStyle=='
20180305-button
qq_27898053的博客
03-05 316
&lt;div&gt; &lt;el-button&gt;默认按钮&lt;/el-button&gt; &lt;el-button type="primary"&gt;主要按钮&lt;/el-button&gt; &lt;el-button type="success"&gt;成功按钮&lt;/el-button&gt; &lt;el
Element 常用组件
qq_45041558的博客
07-28 868
Element常用组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值