快捷導(dǎo)航

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

更新時間：2021年02月01日 10:31:27 作者：熊貓大哥大

這篇文章主要介紹了Element el-button 按鈕組件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 背景

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

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

在分析源碼前，我們先來看一下官方文檔對于button的使用說明：

2. 按鈕分類

el-button按鈕的分類基本是靠顏色區(qū)分的，另外還有一種文本按鈕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. 按鈕狀態(tài)

按鈕狀態(tài)其實就是HTML標準的功能，通過disabled實現(xiàn)禁用即可。

按鈕狀態(tài)：

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

5. 按鈕分組

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

按鈕分組：

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