Element el-button 按鈕組件的使用詳解

Posted on by

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 按鈕組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！ 

推薦閱讀：