深入解析Element UI框架

一、基础组件

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;
}

/* 局部修改样式 */

   

四、实战案例

下面是一个使用 Element UI 构建的完整页面案例，包括多种 Element UI 组件的使用和样式的自定义

  
   
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


  
   

    
      
     
      
     
      
     
    
    
    
    
    
  
   

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      tableData: [{
        date: '2022-09-01',
        name: '小明',
        address: '上海市普陀区'
      }, {
        date: '2022-09-02',
        name: '小红',
        address: '北京市海淀区'
      }, {
        date: '2022-09-03',
        name: '小刚',
        address: '东京市新宿区'
      }, {
        date: '2022-09-04',
        name: '小霞',
        address: '纽约市曼哈顿区'
      }],
      pageSize: 10
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
})
</script>