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>