Element UI極簡(jiǎn)教程(2)：Icon、Button、Link組件的使用
? 致力于最高效的Java學(xué)習(xí)
B 站搜索：楠哥教你學(xué)Java
獲取更多優(yōu)質(zhì)視頻教程
Icon 圖標(biāo)
Element UI 的 Icon 組件提供了一套常用的圖標(biāo)集合，直接使用 i 標(biāo)簽結(jié)合 class 來使用即可：，其中 el-icon-iconName 為官網(wǎng)定義的圖標(biāo)名稱，大家直接在官網(wǎng)查找使用即可。
代碼：
class="el-icon-edit">i>class="el-icon-share">i>class="el-icon-delete">i>
效果圖：
Button 按鈕
Button 按鈕是 Element UI 提供的一組常用操作按鈕組件，直接使用封裝好的 el-button 按鈕即可，如：
其中 type 為按鈕樣式，可選值包括?primary、success、info、warning、danger?，使用方式如下所示，代碼：
<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>
效果圖：
plain 可以去掉按鈕的背景顏色，使用方式如下所示，代碼：
<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>
效果圖：
round 的作用是給按鈕設(shè)置圓角，代碼：
<el-button type="primary" plain round>主要按鈕el-button><el-button type="success" plain round>成功按鈕el-button><el-button type="info" plain round>信息按鈕el-button><el-button type="warning" plain round>警告按鈕el-button><el-button type="danger" plain round>危險(xiǎn)按鈕el-button>
效果圖：
circle 的作用是設(shè)置圓形按鈕，代碼：
<el-button?type="primary"?plain?round?circle>el-button>效果圖：
同時(shí) Button 還可以結(jié)合 Icon 來使用，把圖標(biāo)嵌入到按鈕中，使用方式非常簡(jiǎn)單，直接給 el-button 標(biāo)簽添加 icon 屬性即可，代碼：
<el-button type="primary" icon="el-icon-search" circle>el-button>效果圖：
可以通過 disabled 來設(shè)置按鈕的可用或不可用，代碼：
<el-button type="primary" icon="el-icon-phone" circle disabled>el-button>效果圖：
loading 屬性可以給按鈕設(shè)置“加載中”的效果，比如點(diǎn)擊按鈕之后顯示加載中，3 秒之后加載完畢，這里可以結(jié)合點(diǎn)擊事件和定時(shí)器來完成，代碼如下所示：
<template><div id="app"><el-button type="primary" icon="el-icon-phone" circle @click="test()" :loading="loading">el-button>div>template><script>export default {data(){return{loading:false}},methods:{test(){this.loading = true;setTimeout(() => {this.loading = false;}, 3000)}}}script>
效果圖，點(diǎn)擊之后：
3 秒之后：
size 屬性可以用來設(shè)置按鈕的大小，可選的值包括：medium、small、mini，代碼如下所示：
<el-button type="primary" icon="el-icon-phone" circle size="medium">el-button><el-button type="primary" icon="el-icon-phone" circle size="small">el-button><el-button type="primary" icon="el-icon-phone" circle size="mini">el-button>
效果圖：
Link 超鏈接
Element UI 的 Link 組件可以完成文字超鏈接，使用 el-link 標(biāo)簽來實(shí)現(xiàn)，代碼：
<el-link?href="https://element.eleme.cn/#/zh-CN/component/link"?target="_blank">Element?UIel-link>效果圖：
和 Button 一樣，Link 可以使用 disabled 來設(shè)置超鏈接不可用，代碼如下所示：
<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank" disabled>Element UIel-link>使用 underline 來設(shè)置下劃線，代碼如下所示：
<el-link :underline="false">無下劃線el-link><el-link>有下劃線el-link>
效果圖：
可用使用 icon 給文字超鏈接設(shè)置圖標(biāo)，代碼：
<el-link icon="el-icon-phone">有下劃線el-link>效果圖：
以上就是 Element UI 中 Icon、Button、Link 組件的使用，下一篇教程楠哥將繼續(xù)帶領(lǐng)大家學(xué)習(xí) Element UI 其他組件的使用，如果你覺得這篇教程對(duì)你有幫助，就幫楠哥點(diǎn)個(gè)贊吧，我們下期教程再見。
1、Spring Boot+Vue項(xiàng)目實(shí)戰(zhàn)
楠哥簡(jiǎn)介
資深 Java 工程師，微信號(hào)?southwindss
《Java零基礎(chǔ)實(shí)戰(zhàn)》一書作者
騰訊課程官方 Java 面試官，今日頭條認(rèn)證大V
GitChat認(rèn)證作者，B站認(rèn)證UP主（楠哥教你學(xué)Java）
致力于幫助萬千 Java 學(xué)習(xí)者持續(xù)成長(zhǎng)。
