1. 背景

按鈕是很常用的，Element的按鈕功能還是比較全面的，本篇就來介紹下。

先看下各種按鈕的效果圖：

在分析原始碼前，我們先來看一下官方文件對於button的使用說明：

2. 按鈕分類

el-button按鈕的分類基本是靠顏色區分的，另外還有一種文字按鈕type="text"，文字按鈕由於比較小，比較適合用於表格每行的操作欄部分。

按鈕分類：

  <el-button>預設</el-button>
  <el-button type="primary">primary</el-button>
  <el-button type="success">success</el-button>
  <el-button type="info">info</el-button>
  <el-button type="warning">warning</el-button>
  <el-button type="danger">danger</el-button>
  <el-button type="text">text</el-button>

3. 按鈕樣式

Element提供了樸素按鈕、圓角按鈕、圓形按鈕，需要注意的是圓形按鈕一般只放一個圖示進去，程式碼如下：

按鈕樣式：

  <el-button type="primary" plain>樸素按鈕</el-button>
  <el-button type="primary" round>圓角按鈕</el-button>
  <el-button type="primary" circle icon="el-icon-search"></el-button>

4. 按鈕狀態

按鈕狀態其實就是HTML標準的功能，通過disabled實現禁用即可。

按鈕狀態：

<el-button type="primary">正常</el-button>
<el-button type="primary" disabled>禁用</el-button>

5. 按鈕分組

按鈕分組很好用，像常見的分頁按鈕，分成一組的話更加好看，通過<el-button-group>將按鈕包裹起來，即可實現。

按鈕分組：

  <el-button-group>
   <el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button>
   <el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>

6. 按鈕尺寸

餓了提供了預設、中、小、很小四種尺寸，程式碼如下：

按鈕的尺寸：

<el-button>預設</el-button>
<el-button type="primary" size="medium ">medium</el-button>
<el-button type="primary" size="small">small</el-button>
<el-button type="primary" size="mini">mini</el-button>

7. 小結

el-button提供的功能已經比較完善了，拿來即可即可。注意不推薦自己定義style來修改預設樣式，容易導致外觀不統一。

到此這篇關於Element el-button 按鈕元件的使用詳解的文章就介紹到這了,更多相關Element el-button 按鈕元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！