Icon、Button、Link組件的使用

Icon 圖標(biāo)

Element UI 的 Icon 組件提供了一套常用的圖標(biāo)集合，直接使用 i 標(biāo)簽結(jié)合 class 來使用即可：，其中 el-icon-iconName 為官網(wǎng)定義的圖標(biāo)名稱，大家直接在官網(wǎng)查找使用即可。

代碼：

复制

效果圖：

Button 按鈕

Button 按鈕是 Element UI 提供的一組常用操作按鈕組件，直接使用封裝好的 el-button 按鈕即可，如：按鈕，同時可以使用 type、plain、round、circle 等屬性對按鈕進(jìn)行修飾。

其中 type 為按鈕樣式，可選值包括primary、success、info、warning、danger，使用方式如下所示，代碼：

复制主要按鈕成功按鈕信息按鈕警告按鈕危險按鈕

效果圖：

plain 可以去掉按鈕的背景顏色，使用方式如下所示，代碼：

复制主要按鈕成功按鈕信息按鈕警告按鈕危險按鈕

效果圖：

round 的作用是給按鈕設(shè)置圓角，代碼：

复制主要按鈕成功按鈕信息按鈕警告按鈕危險按鈕

效果圖：

circle 的作用是設(shè)置圓形按鈕，代碼：

效果圖：

同時 Button 還可以結(jié)合 Icon 來使用，把圖標(biāo)嵌入到按鈕中，使用方式非常簡單，直接給 el-button 標(biāo)簽添加 icon 屬性即可，代碼：

复制

效果圖：

可以通過 disabled 來設(shè)置按鈕的可用或不可用，代碼：

复制

效果圖：

loading 屬性可以給按鈕設(shè)置“加載中”的效果，比如點(diǎn)擊按鈕之后顯示加載中，3 秒之后加載完畢，這里可以結(jié)合點(diǎn)擊事件和定時器來完成，代碼如下所示：

复制

效果圖，點(diǎn)擊之后：

3 秒之后：

size 屬性可以用來設(shè)置按鈕的大小，可選的值包括：medium、small、mini，代碼如下所示：

复制

效果圖：

Link 超鏈接

Element UI 的 Link 組件可以完成文字超鏈接，使用 el-link 標(biāo)簽來實現(xiàn)，代碼：

效果圖：

和 Button 一樣，Link 可以使用 disabled 來設(shè)置超鏈接不可用，代碼如下所示：

复制Element UI

使用 underline 來設(shè)置下劃線，代碼如下所示：

复制無下劃線有下劃線

效果圖：

可用使用 icon 給文字超鏈接設(shè)置圖標(biāo)，代碼：

复制有下劃線

效果圖：

以上就是 Element UI 中 Icon、Button、Link 組件的使用，下一篇教程楠哥將繼續(xù)帶領(lǐng)大家學(xué)習(xí) Element UI 其他組件的使用，如果你覺得這篇教程對你有幫助，就幫楠哥點(diǎn)個贊吧，我們下期教程再見。