Element UI
Element UI
- 一、介绍
- 二、准备工作
-
- 1.安装
-
- npm 安装
- CDN
- 2.引入Element（通过npm安装）
-
- 完整引入
- 按需引入
- 3.全局配置
- 4.语言设置
-
- 通过 CDN 的方式加载语言文件
- 5.自定义主题
- 6.内置过渡动画
- 三、组件
-
- Basic 基础组件
- Form 表单组件
- Data数据组件
- Notice 提示组件
- Navigation 导航组件
- Others 其他组件
一、介绍
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">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>
<body>
<div id="app">
<el-button @click="visible = true">Buttonel-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Element测试p>
el-dialog>
div>
body>
<script src="https://unpkg.com/vue@2/dist/vue.js">script>
<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 布局容器：
用于布局的容器组件，方便快速搭建页面的基本结构：
或
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
的子元素只能是后四者，后四者的父元素也只能是。
- 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 上带来不一样的体验.