基礎用法

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

<el-row><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> </el-row><el-row><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> </el-row><el-row><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> </el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row>

效果圖如下所示:

禁用狀態

使用disabled屬性來定義按鈕是否可用，它接收一個boolean值。

<el-row><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> </el-row><el-row><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> </el-row>

效果圖如下所示:

文字按鈕

沒有邊框和背景色

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

效果圖如下所示:

?

?

不同尺寸

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

<el-row><el-button>默認按鈕</el-button><el-button size="medium">中等按鈕</el-button><el-button size="small">小型按鈕</el-button><el-button size="mini">超小按鈕</el-button> </el-row> <el-row><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> </el-row>

效果圖如下所示:

?

?

?

Attributes

參數說明類型可選值默認值

size	尺寸	string	medium/small/mini	——
type	類型	string	primary/success/warning/danger/info/text	——
plain	是否樸素按鈕	boolean	——	false
round	是否圓角按鈕	boolean	——	false
circle	是否圓形按鈕	boolean	——	false
loading	是否加載中狀態	boolean	——	false
disable	是否禁用狀態	boolean	——	false
icon	圖標類型	string	——	——
autofocus	是否默認聚焦	boolean	——	false
native-type	原生type屬性	string	button/submit/reset	buttom

?

總結

以上是生活随笔為你收集整理的Button按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。