Element UI極簡教程(2)：Icon、Button、Link組件的使用
? 致力于最高效的Java學習
B 站搜索：楠哥教你學Java
獲取更多優(yōu)質(zhì)視頻教程
Icon 圖標
Element UI 的 Icon 組件提供了一套常用的圖標集合，直接使用 i 標簽結合 class 來使用即可：，其中 el-icon-iconName 為官網(wǎng)定義的圖標名稱，大家直接在官網(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">危險按鈕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>危險按鈕el-button>
效果圖：
round 的作用是給按鈕設置圓角，代碼：
<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>危險按鈕el-button>
效果圖：
circle 的作用是設置圓形按鈕，代碼：
<el-button?type="primary"?plain?round?circle>el-button>效果圖：
同時 Button 還可以結合 Icon 來使用，把圖標嵌入到按鈕中，使用方式非常簡單，直接給 el-button 標簽添加 icon 屬性即可，代碼：
<el-button type="primary" icon="el-icon-search" circle>el-button>效果圖：
可以通過 disabled 來設置按鈕的可用或不可用，代碼：
<el-button type="primary" icon="el-icon-phone" circle disabled>el-button>效果圖：
loading 屬性可以給按鈕設置“加載中”的效果，比如點擊按鈕之后顯示加載中，3 秒之后加載完畢，這里可以結合點擊事件和定時器來完成，代碼如下所示：
<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>
效果圖，點擊之后：
3 秒之后：
size 屬性可以用來設置按鈕的大小，可選的值包括：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 標簽來實現(xiàn)，代碼：
<el-link?href="https://element.eleme.cn/#/zh-CN/component/link"?target="_blank">Element?UIel-link>效果圖：
和 Button 一樣，Link 可以使用 disabled 來設置超鏈接不可用，代碼如下所示：
<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank" disabled>Element UIel-link>使用 underline 來設置下劃線，代碼如下所示：
<el-link :underline="false">無下劃線el-link><el-link>有下劃線el-link>
效果圖：
可用使用 icon 給文字超鏈接設置圖標，代碼：
<el-link icon="el-icon-phone">有下劃線el-link>效果圖：
以上就是 Element UI 中 Icon、Button、Link 組件的使用，下一篇教程楠哥將繼續(xù)帶領大家學習 Element UI 其他組件的使用，如果你覺得這篇教程對你有幫助，就幫楠哥點個贊吧，我們下期教程再見。
楠哥簡介
資深 Java 工程師，微信號?southwindss
《Java零基礎實戰(zhàn)》一書作者
騰訊課程官方 Java 面試官，今日頭條認證大V
GitChat認證作者，B站認證UP主（楠哥教你學Java）
致力于幫助萬千 Java 學習者持續(xù)成長。
