Basic-Icon图标&button按钮

53 阅读 0 评论 35 点赞

我是靠谱客的博主怕孤单猎豹，最近开发中收集的这篇文章主要介绍Basic-Icon图标&button按钮，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、Icon图标

<!--直接通过设置类名为 el-icon-iconName 来使用即可-->
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

二、button按钮

1、基本使用

type：类型 primary / success / warning / danger / info / text（文字按钮，没有边框和背景色的按钮），无默认值

size：尺寸 medium / small / mini，无默认值

icon：图标类名（带图标的按钮）

disabled：禁用状态

  <el-button
    type="primary"
    icon="el-icon-search"
    size="medium"
    style="margin-left: 10px"
    @click="search()">搜索
  </el-button>
<script>
  new Vue({
    el: '#app',
    methods: {
      search() {
        alert('button按钮触发的点击事件')
      }
    }
  })
</script>

<!--以按钮组的方式出现，常用于多项类似操作。,使用<el-button-group>标签来嵌套你的按钮。-->
<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>