ELementPlus 组件库

概述

ElementPlus 是基于 Vue 3 的流行 UI 组件库，是 Element UI（针对 Vue 2）的升级版本。它提供了丰富的组件和工具，帮助开发者快速构建企业级中后台前端应用。

常用组件

  • 基础组件：Button（按钮）、Icon（图标）、Layout（布局）、Container（容器）
  • 表单组件：Input（输入框）、Select（下拉框）、Form（表单校验）、DatePicker（日期选择）
  • 数据展示：Table（表格，支持排序、分页、筛选）、Tag（标签）、Progress（进度条）
  • 反馈组件：Dialog（对话框）、Message（消息提示）、Notification（通知）、Loading（加载）
  • 导航组件：Menu（菜单）、Tabs（标签页）、Breadcrumb（面包屑）
    -其他功能：Upload（文件上传）、Pagination（分页）、Steps（步骤条）

使用

下载

1
npm install element-plus --save

导入工程

1
2
3
4
5
6
7
8
// 导入element-plus 的所有组件
import ElementPlus from 'element-plus'

// 导入element-plus 的组件样式
import 'element-plus/dist/index.css'

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

组件

表单组件

alt text

表单组件内部几个自定义属性：

  • el-form：表单最外层组件
  • model：表单数据对象
  • label-width：标签的长度，例如 ‘50px’。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。
  • style：行内样式

表单组件内部几个自定义属性：

  • el-form-item：用来包裹表单控件，比如包裹输入框，下拉列表，复选框，按钮等。
  • label：表单控件名称

输入框组件：

  • v-model：用来收集输入框的值。
  • placeholder：提示文本。

下拉框组件：

  • el-select el-option：下拉列表组件和选项。
  • v-model：用来收集下拉列表的值。
  • placeholder：提示文本。
  • label：给用户显示的文本。
  • value：给v-model收集的值。

日期选择组件：

  • el-col：列组件，一行分24列
  • span：一行占的份额，11就是表示占了11/24的空间
  • el-data-picker：日期选择器
  • type：选择器的类型，data可以表示日期
  • placeholder：提示文本。
  • style：行内样式

时间选择组件：

  • el-time-picker：时间选择器。
  • v-model：用来收集选择的时间。

开关组件：

  • el-switch：开关组件。
  • v-model：收集开关状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
            <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox value="Online activities" name="type">
                    Online activities
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                    Promotion activities
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                    Offline activities
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                    Simple brand exposure
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
                <el-radio value="Sponsor">Sponsor</el-radio>
                <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
</template>