Button 按鈕

Button 按鈕

常用的操作按鈕。

¶基礎用法

基礎的按鈕用法。

使用type、plain和round屬性來定義 Button 的樣式。

<div> <el-button>默認按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </div> <div style="margin: 20px 0"> <el-button plain>朴素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>信息按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button> </div> <div> <el-button round>圓形按鈕</el-button> <el-button type="primary" round>主要按鈕</el-button> <el-button type="success" round>成功按鈕</el-button> <el-button type="info" round>信息按鈕</el-button> <el-button type="warning" round>警告按鈕</el-button> <el-button type="danger" round>危險按鈕</el-button> </div> 

 

¶禁用狀態

按鈕不可用狀態。

 

你可以使用disabled屬性來定義按鈕是否可用，它接受一個Boolean值。

<div> <el-button disabled>默認按鈕</el-button> <el-button type="primary" disabled>主要按鈕</el-button> <el-button type="success" disabled>成功按鈕</el-button> <el-button type="info" disabled>信息按鈕</el-button> <el-button type="warning" disabled>警告按鈕</el-button> <el-button type="danger" disabled>危險按鈕</el-button> </div> <div style="margin-top: 20px"> <el-button plain disabled>朴素按鈕</el-button> <el-button type="primary" plain disabled>主要按鈕</el-button> <el-button type="success" plain disabled>成功按鈕</el-button> <el-button type="info" plain disabled>信息按鈕</el-button> <el-button type="warning" plain disabled>警告按鈕</el-button> <el-button type="danger" plain disabled>危險按鈕</el-button> </div> 

 

¶文字按鈕

沒有邊框和背景色的按鈕。

<el-button type="text">文字按鈕</el-button> <el-button type="text" disabled>文字按鈕</el-button> 

 

¶圖標按鈕

帶圖標的按鈕可增強辨識度（有文字）或節省空間（無文字）。

設置icon屬性即可，icon 的列表可以參考 Element 的 icon 組件，也可以設置在文字右邊的 icon ，只要使用i標簽即可，可以使用自定義圖標。

<el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-search">搜索</el-button> <el-button type="primary">上傳<i class="el-icon-upload el-icon--right"></i></el-button> 

 

¶按鈕組

以按鈕組的方式出現，常用於多項類似操作。

 

使用<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> <el-button-group> <el-button type="primary" icon="el-icon-edit"></el-button> <el-button type="primary" icon="el-icon-share"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button> </el-button-group> 

 

¶加載中

點擊按鈕后進行數據加載操作，在按鈕上顯示加載狀態。

要設置為 loading 狀態，只要設置loading屬性為true即可。

<el-button type="primary" :loading="true">加載中</el-button> 

 

¶不同尺寸

Button 組件提供除了默認值以外的三種尺寸，可以在不同場景下選擇合適的按鈕尺寸。

額外的尺寸：medium、small、mini，通過設置size屬性來配置它們。

<div> <el-button>默認按鈕</el-button> <el-button size="medium">中等按鈕</el-button> <el-button size="small">小型按鈕</el-button> <el-button size="mini">超小按鈕</el-button> </div> <div style="margin-top: 20px"> <el-button round>默認按鈕</el-button> <el-button size="medium" round>中等按鈕</el-button> <el-button size="small" round>小型按鈕</el-button> <el-button size="mini" round>超小按鈕</el-button> </div> 

 

¶Attributes

參數	說明	類型	可選值	默認值
size	尺寸	string	medium / small / mini	—
type	類型	string	primary / success / warning / danger / info / text	—
plain	是否朴素按鈕	boolean	—	false
round	是否圓形按鈕	boolean	—	false
loading	是否加載中狀態	boolean	—	false
disabled	是否禁用狀態	boolean	—	false
icon	圖標類名	string	—	—
autofocus	是否默認聚焦	boolean	—	false
native-type	原生 type 屬性	string	button / submit / reset	button