Element UI

ZiminLi

已于 2023-05-20 19:42:41 修改

阅读量922

点赞数

分类专栏：技术栈笔记文章标签： ui vue.js javascript

于 2023-05-15 16:54:43 首次发布

本文链接：https://blog.csdn.net/ZiminLi/article/details/130687801

版权

技术栈笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一、介绍

Element UI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网：https://element.eleme.cn/#/zh-CN

二、准备工作

1.安装

npm 安装

npm i element-ui -S

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

CDN

在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

通过 CDN 的方式使用 Element 写出一个 Hello world 页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Element测试</p>
    </el-dialog>
  </div>
</body>
  <!-- 在引入element之前引入vue -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

Element UI Hello World demo

2.引入Element（通过npm安装）

可以引入整个 Element，或是根据需要仅引入部分组件。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

注意：样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
安装 babel-plugin-component：

npm install babel-plugin-component -D

在文件夹中新建一个.babelrc文件，添加下面内容：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，只引入部分组件，比如 Button 和 Select，在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

3.全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。
完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。

4.语言设置

Element 组件内部默认使用中文，在 main.js 中进行多语言设置：

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

或

// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// 设置语言
locale.use(lang)

// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

完整语言请到element官网进行查看
如果使用其它语言，默认情况下中文语言包依旧是被引入的，在webpack.config.js使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

通过 CDN 的方式加载语言文件

<script src="//unpkg.com/vue@2"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

5.自定义主题

6.内置过渡动画

三、组件

Basic 基础组件

Layout 布局：
通过基础的 24 分栏，迅速简便地创建布局。
Container 布局容器：
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

Color 色彩：
Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为所搭建的产品提供一致的外观视觉感受
Typography 字体：
element对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
Border 边框：
element对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
Icon 图标：
提供了一套常用的图标集合。
Button 按钮：
常用的操作按钮。
Link 文字链接：
文字超链接

Form 表单组件

Radio 单选框：
在一组备选项中进行单选
Checkbox 多选框：
一组备选项中进行多选
Input 输入框：
通过鼠标或键盘输入字符

Input 为受控组件，它总会显示 Vue 绑定值。
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
不支持 v-model 修饰符。

InputNumber 计数器：
仅允许输入标准的数字值，可定义范围
Select 选择器：
当选项过多时，使用下拉菜单展示并选择内容。
Cascader 级联选择器：
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
Switch 开关：
表示两种相互对立的状态间的切换，多用于触发「开/关」。
Slider 滑块：
通过拖动滑块在一个固定区间内进行选择
TimePicker 时间选择器：
用于选择或输入时间
DatePicker 日期选择器：
用于选择或输入日期
DateTimePicker 日期时间选择器：
在同一个选择器里选择日期和时间

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

Upload 上传：
通过点击或者拖拽上传文件
Rate 评分：
评分组件
ColorPicker 颜色选择器：
用于颜色选择，支持多种格式。
Transfer 穿梭框
Form 表单：
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

Data数据组件

Table 表格：
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Tag 标签：
用于标记和选择。
Progress 进度条：
用于展示操作进度，告知用户当前状态和预期。
Tree 树形控件：
用清晰的层级结构展示信息，可展开或折叠。
Pagination 分页：
当数据量过多时，使用分页分解数据。
Badge 标记：
出现在按钮、图标旁的数字或状态标记。
Avatar 头像：
用图标、图片或者字符的形式展示用户或事物信息。
Skeleton 骨架屏：
在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
Empty 空状态：
空状态时的占位提示。
Descriptions 描述列表：
列表形式展示多个字段。
Result 结果：
用于对用户的操作结果或者异常状态做反馈。
Statistic 统计数值：
用于突出某个或某组数字时，如显示数值，如金额，排名等。
倒计时模式

Notice 提示组件

Alert 警告：
用于页面中展示重要的提示信息。
Loading 加载：
加载数据时显示动效。
Message 消息提示：
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
MessageBox 弹框：
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

Notification 通知：
悬浮出现在页面角落，显示全局的通知提醒消息。

Navigation 导航组件

NavMenu 导航菜单：
为网站提供导航功能的菜单。
Tabs 标签页：
分隔内容上有关联但属于不同类别的数据集合。
Breadcrumb 面包屑：
显示当前页面的路径，快速返回之前的任意页面。
PageHeader 页头：
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
Dropdown 下拉菜单：
将动作或菜单折叠到下拉菜单中。
Steps 步骤条：
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

Others 其他组件

Dialog 对话框：
在保留当前页面状态的情况下，告知用户并承载相关操作。
Tooltip 文字提示：
常用于展示鼠标 hover 时的提示信息。
Popover 弹出框：
Popconfirm 气泡确认框：
点击元素，弹出气泡确认框。
Card 卡片：
将信息聚合在卡片容器中展示。
Carousel 走马灯：
在有限空间内，循环播放同一类型的图片、文字等内容
Collapse 折叠面板：
通过折叠面板收纳内容区域
Timeline 时间线：
可视化地呈现时间流信息。
Divider 分割线：
区隔内容的分割线。
Calendar 日历：
显示日期
Image 图片：
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
Backtop 回到顶部：
返回页面顶部的操作按钮
InfiniteScroll 无限滚动：
滚动至底部时，加载更多数据。
Drawer 抽屉：
有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.