Element Plus 组件汇总教程

Element Plus 是基于 Vue 3 和 Vite 的组件库，提供了一套丰富的 UI 组件，用于构建高质量的网页应用程序。作为 Element UI 的 Vue 3 版本，它继承了 Element UI 的设计哲学和组件结构，同时利用 Vue 3 的新特性，如组合式 API（Composition API）和 Teleport，来提供更好的开发体验。

一、组件分类总览

Element Plus 提供了全面的组件分类，主要包括以下几大类：

1. 基础组件（12个）

• ​​Button（按钮）​​：用于创建不同类型的按钮，如主按钮、次按钮、危险按钮等
• ​​Border（边框）​​
• ​​Color（色彩）​​
• ​​Container（布局容器）​​
• ​​Icon（图标）​​
• ​​Layout（布局）​​
• ​​Link（链接）​​
• ​​Text（文本）​​
• ​​Scrollbar（滚动条）​​
• ​​Space（间距）​​
• ​​Splitter（分隔面板）​​
• ​​Typography（排版）​​

2. 配置组件（1个）

• ​​Config Provider（全局配置）​​

3. 表单组件（24个）

• ​​Autocomplete（自动补全输入框）​​
• ​​Cascader（级联选择器）​​
• ​​Checkbox（多选框）​​
• ​​ColorPickerPanel（颜色选择器面板）​​
• ​​Color Picker（颜色选择器）​​
• ​​Date Picker Panel（日期选择器面板）​​
• ​​Date Picker（日期选择器）​​
• ​​DateTime Picker（日期时间选择器）​​
• ​​Form（表单组件）​​
• ​​Input（输入框）​​
• ​​Input Number（数字输入框）​​
• ​​Input Tag（标签输入框）​​
• ​​Mention（提及）​​
• ​​Radio（单选框）​​
• ​​Rate（评分）​​
• ​​Select（选择器）​​
• ​​Virtualized Select（虚拟化选择器）​​
• ​​Slider（滑块）​​
• ​​Switch（开关）​​
• ​​Time Picker（时间选择器）​​
• ​​Time Select（时间选择）​​
• ​​Transfer（穿梭框）​​
• ​​TreeSelect（树形选择）​​
• ​​Upload（上传器）​​

4. 数据展示组件（23个）

• ​​Avatar（头像）​​
• ​​Badge（徽章）​​
• ​​Calendar（日历）​​
• ​​Card（卡片）​​
• ​​Carousel（走马灯）​​
• ​​Collapse（折叠面板）​​
• ​​Descriptions（描述列表）​​
• ​​Empty（空状态）​​
• ​​Image（图片）​​
• ​​Infinite Scroll（无限滚动）​​
• ​​Pagination（分页）​​
• ​​Progress（进度条）​​
• ​​Result（结果）​​
• ​​Skeleton（骨架屏）​​
• ​​Table（表格）​​
• ​​Virtualized Table（虚拟化表格）​​
• ​​Tag（标签）​​
• ​​Timeline（时间线）​​
• ​​Tour（漫游式引导）​​
• ​​Tree（树形控件）​​
• ​​Virtualized Tree（虚拟化树形控件）​​
• ​​Statistic（统计组件）​​
• ​​Segmented（分段控制器）​​

5. 导航组件（9个）

• ​​Affix（固钉）​​
• ​​Anchor（锚点）​​
• ​​Backtop（回到顶部）​​
• ​​Breadcrumb（面包屑）​​
• ​​Dropdown（下拉菜单）​​
• ​​Menu（菜单）​​
• ​​Page Header（页头）​​
• ​​Steps（步骤条）​​
• ​​Tabs（标签页）​​

6. 反馈组件（10个）

• ​​Alert（提示）​​
• ​​Dialog（对话框）​​
• ​​Drawer（抽屉）​​
• ​​Loading（加载）​​
• ​​Message（消息提示）​​
• ​​Message Box（消息弹出框）​​
• ​​Notification（通知）​​
• ​​Popconfirm（气泡确认框）​​
• ​​Popover（弹出框）​​
• ​​Tooltip（文字提示）​​

7. 其他组件（2个）

• ​​Divider（分割线）​​
• ​​Watermark（水印）​​

二、核心组件详解

1. 基础交互组件

Button（按钮）

Element Plus 的 Button 组件用于创建各种类型的按钮，支持多种预设样式和状态。

​​基本用法：​​

<el-button>默认按钮</el-button>

​​类型设置：​​

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

​​尺寸设置：​​

<el-button size="medium">中等按钮</el-button>
<el-button size="small">小按钮</el-button>
<el-button size="mini">迷你按钮</el-button>

​​其他状态：​​

<el-button disabled>不可点击的按钮</el-button>
<el-button loading>Loading...</el-button>
<el-button icon="el-icon-search">搜索</el-button>
<el-button circle>圆</el-button> <!-- 圆形按钮 -->
<el-button type="primary" circle>圆形按钮</el-button>
<el-button type="text">文本按钮</el-button>

Input（输入框）

基础的表单输入组件，用于创建文本输入框。

​​基本用法：​​

<el-input placeholder="请输入内容"></el-input>

​​数据绑定：​​

<el-input v-model="inputValue" placeholder="请输入内容"></el-input>

​​类型设置：​​

<el-input type="textarea" placeholder="多行文本输入"></el-input>
<el-input type="password" placeholder="密码输入" show-password></el-input>

​​尺寸设置：​​

<el-input size="medium" placeholder="中等尺寸"></el-input>
<el-input size="small" placeholder="小尺寸"></el-input>

2. 表单组件

Form（表单）

用于快速构建表单，提供数据验证、布局和样式的便捷管理。

​​基本用法：​​

<el-form :model="form" label-width="120px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <!-- 选择器选项 -->
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>

​​数据验证：​​

<el-form :model="form" :rules="rules" ref="form" label-width="120px">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

​​JavaScript 部分：​​

data() {
  return {
    form: {
      name: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
  };
},
methods: {
  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        alert('提交成功!');
      }
    });
  }
}

Select（选择器）

允许用户从下拉列表中选择一个选项。

<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

Checkbox（复选框）与 Radio（单选框）

用于创建选项组，Checkbox 支持多选，Radio 支持单选。

Switch（开关）

二态切换组件，常用于开启/关闭场景。

Slider（滑块）

通过拖动滑块选择数值区间。

Rate（评分）

让用户给内容打分的组件。

3. 数据展示组件

Table（表格）

用于展示行列数据，支持排序、筛选、对比等操作。

​​基本用法：​​

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

Card（卡片）

用于以卡片形式展示内容。

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{ '列表内容 ' + o }}
  </div>
</el-card>

Pagination（分页）

用于对数据进行分页显示。

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage4"
  :page-sizes="[100, 200, 300, 400]"
  :page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

4. 导航组件

Menu（菜单）

用于组织和展示多个链接或者子菜单的组件。

<el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
  </el-submenu>
</el-menu>

Breadcrumb（面包屑）

显示当前页面在整个网站层次结构中的位置。

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

5. 反馈组件

Dialog（对话框）

模态对话框，用于向用户显示信息、请求确认或承载复杂交互。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

Message（消息提示）

简单的文本消息提示，短暂显示在页面中间。

this.$message('这是一条消息提示');

Notification（通知）

全局的通知提示，可以在页面角落显示短暂的信息提示。

this.$notify({
  title: '成功',
  message: '这是一条成功的提示消息',
  type: 'success'
});

Tooltip（文字提示）

当用户将鼠标悬停在元素上时显示提示信息。

<el-tooltip content="Top center" placement="top">
  <el-button>Dark</el-button>
</el-tooltip>

三、组件使用技巧

1. 组件组合使用

将不同类型的组件组合使用，以适应不同的场景和用户操作。例如，将按钮与表单结合使用，用于提交表单数据。

2. 响应式设计

确保组件在不同设备上都有良好的显示效果，利用 Element Plus 的响应式特性。

3. 国际化支持

利用 Vue.js 的 i18n 插件进行多语言支持，使应用能够适应不同地区的用户。

4. 主题定制

通过 Element Plus 提供的主题定制功能，可以根据项目需求调整组件样式。

5. 性能优化

对于大数据量的表格或列表，使用虚拟化组件（如 Virtualized Table）来提升性能。

四、安装与使用

安装 Element Plus

使用 npm 或 yarn 包管理工具安装 Element Plus：

# 使用 npm
npm install element-plus

# 使用 yarn
yarn add element-plus

基本使用

在 Vue 3 项目中引入 Element Plus：

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

五、总结

Element Plus 提供了丰富的组件库，涵盖了从基础交互到复杂数据展示的各个方面。通过合理使用这些组件，可以大大加快开发速度，并确保应用程序的界面具有专业的外观和感觉。无论是构建企业网站、管理系统还是电商平台，Element Plus 都能提供强大的支持。