W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
常用的操作按鈕。
基礎(chǔ)的按鈕用法。
使用?
type
?、?plain
?、?round
?和?circle
?屬性來定義 Button 的樣式。
<template>
<el-row>
<el-button>默認(rèn)按鈕</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">危險(xiǎn)按鈕</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>危險(xiǎn)按鈕</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>危險(xiǎn)按鈕</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>
</template>
按鈕不可用狀態(tài)。
你可以使用disabled屬性來定義按鈕是否可用,它接受一個(gè)Boolean值。
<template>
<el-row>
<el-button disabled>默認(rèn)按鈕</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>危險(xiǎn)按鈕</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>危險(xiǎn)按鈕</el-button>
</el-row>
</template>
沒有邊框和背景色的按鈕。
<template>
<el-button type="text">文字按鈕</el-button>
<el-button type="text" disabled>文字按鈕</el-button>
</template>
帶圖標(biāo)的按鈕可增強(qiáng)辨識(shí)度(有文字)或節(jié)省空間(無文字)。
設(shè)置?
icon
?屬性即可,icon 的列表可以參考 Element Plus 的 icon 組件,也可以設(shè)置在文字右邊的 icon ,只要使用?i
?標(biāo)簽即可,可以使用自定義圖標(biāo)。
<template>
<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>
</template>
以按鈕組的方式出現(xiàn),常用于多項(xiàng)類似操作。
使用
<el-button-group>
標(biāo)簽來嵌套你的按鈕。
<template>
<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>
</template>
點(diǎn)擊按鈕后進(jìn)行數(shù)據(jù)加載操作,在按鈕上顯示加載狀態(tài)。
要設(shè)置為 loading 狀態(tài),只要設(shè)置?
loading
?屬性為?true
?即可。
<template>
<el-button type="primary" :loading="true">加載中</el-button>
</template>
Button 組件提供除了默認(rèn)值以外的三種尺寸,可以在不同場景下選擇合適的按鈕尺寸。
額外的尺寸:?
medium
?、?small
?、?mini
?,通過設(shè)置?size
?屬性來配置它們。
<template>
<el-row>
<el-button>默認(rèn)按鈕</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>默認(rèn)按鈕</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>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-search" size="medium" circle></el-button>
<el-button icon="el-icon-search" size="small" circle></el-button>
<el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>
</template>
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
size | 尺寸 | string | medium / small / mini | — |
type | 類型 | string | primary / success / warning / danger / info / text | — |
plain | 是否樸素按鈕 | boolean | — | false |
round | 是否圓角按鈕 | boolean | — | false |
circle | 是否圓形按鈕 | boolean | — | false |
loading | 是否加載中狀態(tài) | boolean | — | false |
disabled | 是否禁用狀態(tài) | boolean | — | false |
icon | 圖標(biāo)類名 | string | — | — |
autofocus | 是否默認(rèn)聚焦 | boolean | — | false |
native-type | 原生 type 屬性 | string | button / submit / reset | button |
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
size | 用于控制該按鈕組內(nèi)按鈕的尺寸 | string | medium / small / mini | — |
Name | Description |
---|---|
default | 自定義按鈕組內(nèi)容 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: