Button

EasyButton is an enhanced version based on Element Plus Button component, with the main feature of automatically handling the loading state of asynchronous operations.

Online Demo

The core feature of EasyButton is automatic handling of async operations. When the click event returns a Promise, the button will automatically show a loading state until the Promise is completed.

<template>
  <div class="button-group">
    <EasyButton @click="handleLongAsync">Default</EasyButton>
    <EasyButton type="primary" @click="handleLongAsync">Primary</EasyButton>
    <EasyButton type="success" @click="handleLongAsync">Success</EasyButton>
    <EasyButton type="info" @click="handleLongAsync">Info</EasyButton>
    <EasyButton type="warning" @click="handleLongAsync">Warning</EasyButton>
    <EasyButton type="danger" @click="handleLongAsync">Danger</EasyButton>
  </div>

  <div v-if="message" class="message">
    {{ message }}
  </div>
</template>

<script setup>
import { ref } from "vue"
import { EasyButton } from "easy-elplus"

const message = ref("")

const handleLongAsync = async () => {
  message.value = "异步操作开始..."
  await new Promise(resolve => setTimeout(resolve, 3000))
  message.value = "异步操作完成！"
  setTimeout(() => {
    message.value = ""
  }, 2000)
}
</script>

<style scoped>
h3 {
  margin: 20px 0 10px;
  font-size: 16px;
  color: #303133;
}

.message {
  margin-top: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
}
</style>

API

Attributes

EasyButton inherits all attributes of Element Plus Button. Common attributes are as follows:

Attribute	Description	Type	Accepted Values	Default
type	Type	string	primary / success / warning / danger / info / text	—
size	Size	string	large / default / small	—
plain	Whether it's a plain button	boolean	—	false
round	Whether it's a round button	boolean	—	false
circle	Whether it's a circle button	boolean	—	false
loading	Loading state (manual control)	boolean	—	false
disabled	Disabled state	boolean	—	false
icon	Icon component	Component	—	—

Events

Event Name	Description	Callback Parameters
click	Click event, supports async function	(event: MouseEvent) => void | Promise<void>

Slots

Slot Name	Description
default	Button content

Features

EasyButton detects if the click event handler returns a Promise. If a Promise is returned, the button will:

1. Immediately enter loading state (show loading icon)
2. Wait for the Promise to complete
3. Automatically restore to normal state

This prevents repeated submissions caused by repeated clicks.