Element el-button 按鈕組件的使用詳解
1. 背景
按鈕是很常用的，Element的按鈕功能還是比較全面的，本篇就來介紹下。
先看下各種按鈕的效果圖：
在分析源碼前，我們先來看一下官方文檔對于button的使用說明：
2. 按鈕分類
el-button按鈕的分類基本是靠顏色區(qū)分的，另外還有一種文本按鈕type="text"，文本按鈕由于比較小，比較適合用于表格每行的操作欄部分。
按鈕分類：
<el-button>默認(rèn)</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提供了樸素按鈕、圓角按鈕、圓形按鈕，需要注意的是圓形按鈕一般只放一個(gè)圖標(biāo)進(jìn)去，代碼如下：
按鈕樣式：
<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)其實(shí)就是HTML標(biāo)準(zhǔn)的功能，通過disabled實(shí)現(xiàn)禁用即可。
按鈕狀態(tài)：
<el-button type="primary">正常</el-button> <el-button type="primary" disabled>禁用</el-button>
5. 按鈕分組
按鈕分組很好用，像常見的分頁按鈕，分成一組的話更加好看，通過<el-button-group>將按鈕包裹起來，即可實(shí)現(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. 按鈕尺寸
餓了提供了默認(rèn)、中、小、很小四種尺寸，代碼如下：
按鈕的尺寸：
<el-button>默認(rèn)</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. 小結(jié)
el-button提供的功能已經(jīng)比較完善了，拿來即可即可。注意不推薦自己定義style來修改默認(rèn)樣式，容易導(dǎo)致外觀不統(tǒng)一。
到此這篇關(guān)于Element el-button 按鈕組件的使用詳解的文章就介紹到這了,更多相關(guān)Element el-button 按鈕組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學(xué)習(xí)可以知道組件上v-model指令的本質(zhì)也是生成了value屬性和input事件，具體實(shí)例代碼跟隨小編一起看看吧2022-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)顯示消息提示框功能,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的詳細(xì)教程
Vue腳手架指的是vue-cli,它是一個(gè)快速構(gòu)建**單頁面應(yīng)用程序(SPA)**環(huán)境配置的工具，cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的相關(guān)資料,需要的朋友可以參考下2022-09-09
關(guān)于Vue Router的10條高級技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)例
這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
最近在學(xué)習(xí)或工作中遇到,把Vue前端項(xiàng)目打包后,要求可以再次修改請求后端接口的基礎(chǔ)地址,下面這篇文章主要給大家介紹了關(guān)于vue前端靈活改變后端地址的兩種方式,需要的朋友可以參考下2024-03-03
解決vue 更改計(jì)算屬性后select選中值不更改的問題
下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
基于vue實(shí)現(xiàn)swipe分頁組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁組件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05