一、基础组件
Element UI 提供了 50 多个基础组件，包括常见的按钮、表单、表格等，我们可以通过简单的组合就能够快速构建出页面
1. Button 按钮
按钮是我们常用的交互元素之一，Element UI 针对按钮的使用场景做了很多划分，比如基础按钮、带图标按钮、不同尺寸按钮等
默认按钮
主要按钮
成功按钮
警告按钮
危险按钮
2. Input 输入框
同样，Element UI 的输入框也提供了多种形态，包括基础输入框、带 icon 输入框、多种尺寸输入框等
3. Table 表格
在数据展示方面，Element UI 的表格功能是一个非常优秀的组件，提供了列固定、分页、可编辑等高级操作
二、高级组件
除了基础组件外，Element UI 还提供了很多高级组件，提供了更为复杂的交互功能，下面介绍其中两个
1. Dialog 对话框
Dialog 提供模态框的弹出，可以完美的替代原生的 alert、confirm 等弹框
这是一段信息
取 消
确 定
2. Form 表单
Form 可以给表单提供更为精细的控制，包括动态添加表单项等功能
-
三、主题与样式
除了丰富的组件外，Element UI 提供了全局的主题设置和组件的局部样式修改
1. 主题设置
可自定义主题，可以通过 Element UI 官方提供的在线生成器，或者手动设置变量定制主题
// 在 main.js 中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 设置主题颜色
Vue.use(ElementUI, {
size: 'medium', // 设置元素尺寸
theme: '#409EFF' // 设置主题颜色
});
2. 自定义样式
可以通过简单的修改 Element UI 提供的默认样式文件，或者使用 scoped 样式实现样式的局部控制
/* 修改全局样式 */
/* src/assets/theme/index.css */
/* 自定义表头样式 */
.el-table th {
background-color: #f4f4f4;
color: #333;
}
/* 局部修改样式 */
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/195903.html
微信扫一扫 
支付宝扫一扫 