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

2021-12-15 20:45:15 浏览数 (1)

Icon 图标

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

代码：

代码语言：javascript复制
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>

效果图：

Button 按钮

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

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

代码语言：javascript复制
<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 可以去掉按钮的背景颜色，使用方式如下所示，代码：

代码语言：javascript复制
<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 的作用是给按钮设置圆角，代码：

代码语言：javascript复制
<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 的作用是设置圆形按钮，代码：

代码语言：javascript复制
<el-button type="primary" plain round circle></el-button>

效果图：

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

代码语言：javascript复制
<el-button type="primary" icon="el-icon-search" circle></el-button>

效果图：

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

代码语言：javascript复制
<el-button type="primary" icon="el-icon-phone" circle disabled></el-button>

效果图：

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

代码语言：javascript复制
<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，代码如下所示：

代码语言：javascript复制
<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 标签来实现，代码：

代码语言：javascript复制
<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank">Element UI</el-link>

效果图：

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

代码语言：javascript复制
<el-link href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank" disabled>Element UI</el-link>

使用 underline 来设置下划线，代码如下所示：

代码语言：javascript复制
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>

效果图：

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

代码语言：javascript复制
<el-link icon="el-icon-phone">有下划线</el-link>

效果图：

以上就是 Element UI 中 Icon、Button、Link 组件的使用，下一篇教程楠哥将继续带领大家学习 Element UI 其他组件的使用

elementui

0 人点赞