当前位置:   article > 正文

Element UI极简教程(2):Icon、Button、Link组件的使用

elementui icon使用

1d15f6751af8754992f7f159cddd8945.png

  Java大联盟

  致力于最高效的Java学习

关注

5980e671c268aadffc203f327a94b073.gif

B 站搜索:楠哥教你学Java

获取更多优质视频教程

Icon 图标

Element UI 的 Icon 组件提供了一套常用的图标集合,直接使用 i 标签结合 class 来使用即可:<i class="el-icon-iconName"></i>,其中 el-icon-iconName 为官网定义的图标名称,大家直接在官网查找使用即可。

ab17a9b9fe92cf31f272a16f28f8298d.png

代码:

  1. <i class="el-icon-edit"></i>
  2. <i class="el-icon-share"></i>
  3. <i class="el-icon-delete"></i>

效果图:

4b43ffeb99c75aa936df15b0a92c7a2f.png

Button 按钮

Button 按钮是 Element UI 提供的一组常用操作按钮组件,直接使用封装好的 el-button 按钮即可,如:<el-button>按钮</el-button> ,同时可以使用 type、plain、round、circle 等属性对按钮进行修饰。

其中 type 为按钮样式,可选值包括 primary、success、info、warning、danger ,使用方式如下所示,代码:

  1. <el-button type="primary">主要按钮</el-button>
  2. <el-button type="success">成功按钮</el-button>
  3. <el-button type="info">信息按钮</el-button>
  4. <el-button type="warning">警告按钮</el-button>
  5. <el-button type="danger">危险按钮</el-button>

效果图:

c8f9e74df93236609b8b026506d62395.png

plain 可以去掉按钮的背景颜色,使用方式如下所示,代码:

  1. <el-button type="primary" plain>主要按钮</el-button>
  2. <el-button type="success" plain>成功按钮</el-button>
  3. <el-button type="info" plain>信息按钮</el-button>
  4. <el-button type="warning" plain>警告按钮</el-button>
  5. <el-button type="danger" plain>危险按钮</el-button>

效果图:

bd3dffc4f02740a4113f23973b33c9d5.png

round 的作用是给按钮设置圆角,代码:

  1. <el-button type="primary" plain round>主要按钮</el-button>
  2. <el-button type="success" plain round>成功按钮</el-button>
  3. <el-button type="info" plain round>信息按钮</el-button>
  4. <el-button type="warning" plain round>警告按钮</el-button>
  5. <el-button type="danger" plain round>危险按钮</el-button>

效果图:

c6f48f7887873ea4cc1408c244bad2aa.png

circle 的作用是设置圆形按钮,代码:

<el-button type="primary" plain round circle></el-button>

效果图:

b25ae1cd6c16a7c0159c2f65c9dec0b6.png

同时 Button 还可以结合 Icon 来使用,把图标嵌入到按钮中,使用方式非常简单,直接给 el-button 标签添加 icon 属性即可,代码:

<el-button type="primary" icon="el-icon-search" circle></el-button>

效果图:

818cb48e34e89ed80518f8b520b41899.png

可以通过 disabled 来设置按钮的可用或不可用,代码:

<el-button type="primary" icon="el-icon-phone" circle disabled></el-button>

效果图:

40dde291d275c71533ae0fffce355c83.png

loading 属性可以给按钮设置“加载中”的效果,比如点击按钮之后显示加载中,3 秒之后加载完毕,这里可以结合点击事件和定时器来完成,代码如下所示:

  1. <template>
  2. <div id="app">
  3. <el-button type="primary" icon="el-icon-phone" circle @click="test()" :loading="loading"></el-button>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data(){
  9. return{
  10. loading:false
  11. }
  12. },
  13. methods:{
  14. test(){
  15. this.loading = true;
  16. setTimeout(() => {
  17. this.loading = false;
  18. }, 3000)
  19. }
  20. }
  21. }
  22. </script>

效果图,点击之后:

d3207dd2b7d92dcd79c09a5164878f85.png

3 秒之后:

6e7e937954fb3aae28d73dbf5715b016.png

size 属性可以用来设置按钮的大小,可选的值包括:medium、small、mini,代码如下所示:

  1. <el-button type="primary" icon="el-icon-phone" circle size="medium"></el-button>
  2. <el-button type="primary" icon="el-icon-phone" circle size="small"></el-button>
  3. <el-button type="primary" icon="el-icon-phone" circle size="mini"></el-button>

效果图:

1dc8eb991dd21d31f146507f46d5737e.png

Link 超链接

Element UI 的 Link 组件可以完成文字超链接,使用 el-link 标签来实现,代码:

<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank">Element UI</el-link>

效果图:

573622d890fa8882bd43566ac2362cb7.png

和 Button 一样,Link 可以使用 disabled 来设置超链接不可用,代码如下所示:

<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank" disabled>Element UI</el-link>

使用 underline 来设置下划线,代码如下所示:

  1. <el-link :underline="false">无下划线</el-link>
  2. <el-link>有下划线</el-link>

效果图:

bf8ebec2548cb8810e1d59ad2fc148eb.png

可用使用 icon 给文字超链接设置图标,代码:

<el-link icon="el-icon-phone">有下划线</el-link>

效果图:

15f944586a8827219ea915d4e9dc74fe.png

以上就是 Element UI 中 Icon、Button、Link 组件的使用,下一篇教程楠哥将继续带领大家学习 Element UI 其他组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。

推荐阅读

1、Spring Boot+Vue项目实战

2、B站:4小时上手MyBatis Plus

3、一文搞懂前后端分离

4、快速上手Spring Boot+Vue前后端分离

楠哥简介

资深 Java 工程师,微信号 southwindss

《Java零基础实战》一书作者

腾讯课程官方 Java 面试官,今日头条认证大V

GitChat认证作者,B站认证UP主(楠哥教你学Java)

致力于帮助万千 Java 学习者持续成长。

4d3925bd69887b1353c8f64f9f038daf.png

1120c3aa6a1c56c94e74efefe3a04f2e.png

有收获,就在看 92738cca6013d3fd98c50b11a6e1b003.png

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号