深入解析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;

}
/* 局部修改樣式 */
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/195903.html