Skip to content

ElementPlus 基础组件

ElementPlus 基础组件

简介

Element Plus 使用 Vue 语法对一些开发过程中的常用元素效果或页面布局形式以组件化的形式进行封装，方便在开发过程中快速实现效果。

本节主要讲解 Element Plus 中的按钮组件，布局容器组件及 Icon 图标组件。

  • 官网地址：https://element-plus.org/zh-CN/component/button.html

Button 按钮

在 Element Plus 中，按钮是用户与网页进行交互的重要组件之一，通过 el-button 组件实现不同样式按钮的实现。

默认按钮

默认按钮用于一般的操作，没有特殊的样式。

<el-button>默认：Default</el-button>

按钮类型

通过 type 属性，实现不同的按钮类型， 通常用于强调用户重要的操作，比如提交表单等。

<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>

圆角按钮

圆角按钮通过添加 round 属性来实现。

<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>

圆形按钮

圆形按钮通过添加 circle 属性来实现。

<el-button circle>circle</el-button>
<el-button type="primary" circle>1</el-button>
<el-button type="success" circle>2</el-button>

加载按钮

可以通过 loading 将按钮设置为加载状态。

<el-button type="primary" loading>Loading</el-button>

禁用状态按钮

可以通过添加disable属性来禁用按钮。

<el-button type="danger" disabled>禁用状态</el-button>

按钮尺寸

可以通过设置 size 属性来调整按钮的尺寸，可选值有 large、default和small。

<el-button type="primary" size="large">Large</el-button>
<el-button type="primary"  size="default">Default</el-button>
<el-button type="primary" size="small">Small</el-button>

按钮组

可以是使用按钮组将多个按钮组织在一起，通过 el-button-group 组件来实现。

<el-button-group>
  <el-button type="primary" >1</el-button>
  <el-button type="primary" >2</el-button>
  <el-button type="primary" >3</el-button>
</el-button-group>

API

组件属性及事件可查看官方文档。

Container 布局容器

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

  • <el-container>：外层容器。
  • <el-header>：顶部栏容器。
  • <el-aside>：侧边栏容器。
  • <el-main>：主要区域容器。
  • <el-footer>：底部栏容器。

当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-container> 的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 <el-container>。

在使用这些布局组件时，浏览器根据组件渲染完成后，会为当前组件添加一个与组件名同名的类型，如 class='cl-container'、class='el-main' 等，可以通过该类名为当前组件添加样式等操作。

<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
        <el-footer>footer</el-footer>
    </el-container>

    <hr>

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

<script setup>

</script>

<style>
hr{
    margin: 100px 0;
}
.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;
}
</style>

API

组件属性及事件可查看官方文档。

Icon 图标

Element Plus 提供了一套常用的图标集合。

使用图标按钮时，需要先安装图标库，然后需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

Icon 安装

安装图标库
npm install @element-plus/icons-vue
在线引入图标库
<!-- 使用 unpkg -->
<script src="//unpkg.com/@element-plus/icons-vue"></script>
<!-- 使用 jsDelivr -->
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
导入图标库并进行全局注册
// 从 @element-plus/icons-vue 中导入所有图标
// 如果是在线引入方式，不需要书写该行代码
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 将图标组件进行全局注册。
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }

app.use(ElementPlus)
app.mount('#app')

导入图标组件

在 Vue 模板中使用图标组件时，需要从安装好的图标组件库中导入需要使用的图标。

<script setup>
    // 在使用图标位置导入图标名
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
        Share,
    } from '@element-plus/icons-vue'
</script>

Icon 图标使用

Element Plus 提供了大量的图标组件，更多的组件图标，可以参考官方网站。

基础用法

导入图标组件后，可以直接使用图标组件。

由于 SVG 图标默认没有任何属性，所以在使用时，可以通过 style 为期添加样式。

<!-- 直接使用 -->
<Edit />

<!-- 由于SVG图标默认不携带任何属性,需要设置显示样式 -->
<Edit style="width: 16px; height: 16px; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />

<!-- 从父元素中获取属性 -->
<div style="font-size: 20px">
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" /> 
</div>
el-icon 组件

也可以通过 el-icon 组件使用图标组件。

<!-- 设置图标大小与颜色 -->
<el-icon size="30" color="#409EFC">
    <Edit />
</el-icon>

<!-- 使用响应式变量设置图标大小与颜色 -->
<el-icon :size="size" :color="color">
    <Edit />
</el-icon>
图标按钮

通过设置el-button 组件的 :icon 属性并引入对应的图标组件创建带图标的按钮。

<el-button :icon="Search"  />
<el-button type="primary" :icon="Edit"  />
<el-button type="success" :icon="Check" round />
<el-button type="info" :icon="Message" round />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />

API

组件属性及事件可查看官方文档。

总结

  • <el-button> 按钮组件
  • <el-container>：外层容器组件。
  • <el-header>：顶部栏容器组件。
  • <el-aside>：侧边栏容器组件。
  • <el-main>：主要区域容器组件。
  • <el-footer>：底部栏容器组件。
  • <el-icon>：图标组件。