10.基于Vue 3的UI组件库-Element Plus

Element Plus入门

Element Plus可以直接使用CDN的方式进行引入，单独地使用其提供的组件和样式，这与渐进式风格的Vue框架十分类似；同样，也可以使用NPM和Vue CLI创建的模板工程中依赖Element Plus框架使用

Element Plus的安装与使用

Element Plus支持使用CDN的方式进行引入。如果我们在开发简单的静态页面时使用CDN的方式引入Vue框架，那么可以使用同样的方式来引入Element Plus框架。

新建一个名为element.html，示例如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element UI</title>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application" style="text-align:center;">
        <h1>这里时模板内容:{{count}}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const App = {
            data(){
                return {
                    count:0,
                }
            },
            methods: {
                clickButton(){
                    this.count = this.count + 1
                }
            },
        }
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>

页面上显示的标题和按钮都是原生的HTML元素，样式并不怎么漂亮。

首先，在head标签中引入Element Plus框架，代码如下：

1
2
3
4
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<!-- 引入组件库 -->
<script src="//unpkg.com/element-plus"></script>

之后，需要在JavaScript代码中对创建的应用实例做一些修改，使其挂载Element Plus相关的功能如下：

1
2
3
let instance = Vue.createApp(App)
instance.use(ElementPlus)
instance.mount("#Application")

修改HTML代码如下：

1
2
3
4
<div id="Application" style="text-align: center;">
    <div style="margin: 40px;"><el-tag>这里是模板的内容:{{count}}次点击</el-tag></div>
    <div><el-button v-on:click="clickButton">按钮</el-button></div>
</div>

上面代码是在单文件中使用了Element Plus框架，在完整的Vue工程中使用也非常简单。直接在创建好的Vue工程目录下执行如下命令：

1
npm install element-plus --save

执行完成后，可以看到工程下的package.json文件中指定依赖的部分已经添加了Element Plus框架：

1
2
3
4
5
"dependencies": {
  "core-js": "^3.8.3",
  "element-plus": "^2.4.3",
  "vue": "^3.2.13",
},

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

修改main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 导入vue框架中的createApp方法
import { createApp } from 'vue'
// 导入ElementPlus框架
import ElementPlus from 'element-plus'
// 导入导入ElementPlus框架中的CSS样式
import 'element-plus/dist/index.css'
// Element Plus 组件 默认 使用英语 修改为中文
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 导入我们自定义的根组件
import App from './App.vue'


// 挂载根组件
const app = createApp(App)
app.use(ElementPlus, {locale: zhCn,})
app.mount('#app')

之后，我们尝试修改HelloWorld.vue，在其中使用Element Plus内置的组件，修改HelloWorld.Vue文件中的template模板如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="空空如也~~~"></el-empty>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name: 'HelloWorld',
      msg: "你好Vue"
    }
  }
}
</script>

el-empty 组件是一个空态组件，用来展示无数据时的页面占位图。运行项目http://localhost:8080/，效果如下：

空态页组件示例

基础组件

以下所有组件属性只有常见属性配置，更多详细属性请浏览博主下方的官网对应链接

按钮组件

Element Plus中提供了el-button组件来创建按钮

el-button组件中可用的属性

Button 按钮 | Element Plus (element-plus.org)

属性名说明类型默认值
size按钮尺寸large:大
default:默认
small:小		—
type按钮类型，设置不同类型会默认配置配套的按钮风格primary:常规
success:成功
warning:警告
danger:危险
info:详情
text:文本		—
plain是否采用描边风格的按钮布尔值false
text 2.2.0是否为文字按钮布尔值false
bg 2.2.0是否显示文字按钮背景颜色布尔值false
link 2.2.1是否为链接按钮布尔值false
round是否为圆角按钮布尔值false
circle是否为圆形按钮布尔值false
loading是否为加载中状态布尔值false
loading-icon自定义加载中状态图标组件字符串 / 组件Loading
disabled按钮是否为禁用状态布尔值false
icon图标组件字符串 / 组件—
autofocus原生 autofocus 属性布尔值false
native-type原生 type 属性button：按钮
submit：提交
reset：重置		button
auto-insert-space自动在两个中文字符之间插入空格布尔值—
color自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色字符串—
darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色布尔值false
tag 2.3.4自定义元素标签字符串 / 组件button

根据不同风格尺寸

1
2
3
4
5
6
<el-button>默认按钮</el-button>
<el-button size="large" type="primary" :plain="true">大按钮 常规 描边</el-button>
<el-button size="default" type="success" :disabled="true" :round="true">默认按钮 成功 禁用 圆角</el-button>
<el-button size="small" type="info" >小按钮 信息</el-button>
<el-button type="warning" :loading="true">默认按钮 警告</el-button>
<el-button size="large" type="danger" :circle="true">大按钮 危险 圆形</el-button>

按钮的各种配置属性

设置图标按钮需要配置icon 图标 |元素加 (element-plus.org)

安装

1
2
3
4
npm install @element-plus/icons-vue
// 自动导入
npm i -D unplugin-icons
npm i -D unplugin-auto-import
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div >
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

标签组件

Element Plus中提供了el-tag组件来创建标签

属性名说明类型默认
typeTag 的类型success:成功
info:详情
warning:警告
danger:危险		‘’
closable是否可关闭布尔值false
disable-transitions是否禁用渐变动画布尔值false
hit是否有边框描边布尔值false
color背景色字符串‘’
sizeTag 的尺寸large:大
default:默认
small:小		‘’
effectTag 的主题dark:深色
light:浅色
plain:普通		light
roundTag 是否为圆形布尔值false