FaButton

Wraps Element Plus Button with automatic loading, a page overlay and the exposed doLoading method.

Button States

View code

Vue

<template>
	<div class="demo-stack">
		<div class="demo-row">
			<FaButton type="primary" @click="handleAsyncClick">自动 Loading</FaButton>
			<FaButton ref="buttonRef" type="success" disabled-loading @click="handleExposeLoading">Expose Loading</FaButton>
			<FaButton type="warning" plain disabled-loading>禁用自动 Loading</FaButton>
			<FaButton type="danger" disabled>禁用状态</FaButton>
		</div>
		<div class="demo-row">
			<FaButton size="small" round disabled-loading>小型圆角</FaButton>
			<FaButton type="primary" dashed disabled-loading>虚线按钮</FaButton>
			<FaButton type="primary" link disabled-loading>链接按钮</FaButton>
			<FaButton type="primary" circle icon="el-icon-Search" disabled-loading />
		</div>
	</div>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { ElMessage } from "element-plus";

const buttonRef = useTemplateRef<{ doLoading: (callback: () => void | Promise<void>) => Promise<void> }>("buttonRef");

const handleAsyncClick = (_event: MouseEvent, done?: () => void): void => {
	window.setTimeout(() => {
		ElMessage.success("异步操作完成");
		done?.();
	}, 700);
};

const handleExposeLoading = (): void => {
	buttonRef.value?.doLoading(async () => {
		await new Promise<void>((resolve) => {
			window.setTimeout(resolve, 800);
		});
		ElMessage.success("Expose Loading 完成");
	});
};
</script>

FaButton Complete API

Props (20)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
loading	Fast override	Loading state.	Boolean	FastfalseELfalse
loadingIcon	Fast override	Loading icon component.	String / Object / Function	Fast—EL—
disabledLoading	Fast addition	Disable automatic Fast loading on click.	Boolean	false
size	EL native	Component size.	String	—
disabled	EL native	Disable the component or current option.	Boolean	false
type	EL native	Button visual type.	String	""
icon	EL native	Icon component or name.	String / Object / Function	—
nativeType	EL native	Native button type.	String	button
plain	EL native	Use a plain button.	Boolean	false
text	EL native	Use a text button.	Boolean	false
link	EL native	Render a table cell as a link.	Boolean	false
bg	EL native	Show a background on text buttons.	Boolean	false
autofocus	EL native	Automatically focus.	Boolean	false
round	EL native	Use a rounded button.	Boolean	false
circle	EL native	Use a circular button.	Boolean	false
dashed	EL native	Use a dashed button.	Boolean	false
color	EL native	Custom button color.	String	—
dark	EL native	Use dark mode for the custom color.	Boolean	false
autoInsertSpace	EL native	Insert spacing between two Chinese characters.	Boolean	false
tag	EL native	Render the cell as a tag.	String / Object	button

Events（1）

Name	Source	Description	Parameters / type
click	EL native	Click event.	—

Slots（3）

Name	Source	Description	Parameters / type
default	EL native	Default component content.	—
loading	EL native	Custom loading content.	—
icon	EL native	Custom button/component icon.	—

Expose（7）

Name	Source	Description	Parameters / type
ref	EL native	Underlying Element Plus component ref.	—
size	EL native	Resolved button size.	—
type	EL native	Resolved button type.	—
disabled	EL native	Current button disabled state.	—
shouldAddSpace	EL native	Whether the button inserts spacing between two Chinese characters.	—
loading	Fast addition	Fast business loading state.	—
doLoading(function)	Fast addition	Runs a sync/async function with shared loading and overlay state.	(function)

FaButton instance methods

doLoading Loading

Runs a task with button loading state.

Signature

doLoading(loadingFunction: () => void | Promise<void>): Promise<void>;

Example

<template>
	<FaButton ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaButton } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaButton>>();
const saveData = async () => Promise.resolve();
const result = await componentRef.value?.doLoading(async () => saveData());
</script>

Input

Input	Type	Required / default	Description
loadingFunction	() => void | Promise<void>	Required	Synchronous or asynchronous task to run while loading.

Returns

Value	Type	Description
result	Promise<void>	Asynchronous result; callers handle Promise rejection.

State and lifecycle

Concurrent doLoading calls and click done callbacks own separate Loading entries. Duplicate/late completion releases only its owner. External and manually set loading do not close active tasks. Unmount releases this instance and prevents new work.