当前位置：首页 > 前端教程

elementui button

2026-03-05 18:56:16前端教程

ElementUI Button 组件使用指南

ElementUI 是基于 Vue.js 的组件库，其 Button 组件提供了丰富的按钮样式和功能。以下为详细使用方法及常见场景示例。

基础用法

通过 type 属性定义按钮风格，支持 primary/success/warning/danger/info 等类型：

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>

禁用状态

添加 disabled 属性控制按钮状态：

<el-button disabled>禁用按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>

图标按钮

使用 icon 属性或 slot 插入图标：

<el-button icon="el-icon-search">搜索</el-button>
<el-button type="primary">
  <i class="el-icon-upload"></i> 上传
</el-button>

按钮组

el-button-group 实现按钮组合：

<el-button-group>
  <el-button icon="el-icon-arrow-left">上一页</el-button>
  <el-button>下一页<i class="el-icon-arrow-right"></i></el-button>
</el-button-group>

加载状态

通过 loading 属性显示加载动画：

<el-button :loading="true">加载中</el-button>
<el-button type="primary" :loading="isLoading" @click="submit">
  提交
</el-button>

自定义尺寸

使用 size 属性调整尺寸（medium/small/mini）：

<el-button size="medium">中号按钮</el-button>
<el-button size="small">小号按钮</el-button>

事件绑定

通过 @click 绑定点击事件：

<el-button @click="handleClick">点击触发</el-button>

代码示例

完整 Vue 组件示例：

<template>
  <div>
    <el-button-group>
      <el-button 
        type="primary" 
        icon="el-icon-edit" 
        @click="edit">
        编辑
      </el-button>
      <el-button 
        type="danger" 
        :loading="deleting" 
        @click="deleteItem">
        删除
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deleting: false
    }
  },
  methods: {
    edit() {
      console.log('编辑操作');
    },
    deleteItem() {
      this.deleting = true;
      // 异步操作示例
      setTimeout(() => {
        this.deleting = false;
      }, 1000);
    }
  }
}
</script>