FaButton 按钮

封装 Element Plus Button，并加入团队统一的自动 Loading、页面遮罩和 doLoading 实例方法。

按钮类型、自动 Loading 与 Expose

查看代码

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 完整 API

Props 属性 (20)

Fast 与 Element Plus 2.14.6 的属性已合并展示；Fast 修改项优先排列，未透传的原生属性保留用于兼容性核对。

属性	来源	说明	类型	默认值
loading	Fast 修改	加载状态。	Boolean	FastfalseELfalse
loadingIcon	Fast 修改	加载状态显示的图标组件。	String / Object / Function	Fast—EL—
disabledLoading	Fast 新增	点击时不启用 Fast 自动 Loading。	Boolean	false
size	EL 原生	组件尺寸。	String	—
disabled	EL 原生	是否禁用组件或当前选项。	Boolean	false
type	EL 原生	按钮视觉类型。	String	""
icon	EL 原生	图标组件或图标名称。	String / Object / Function	—
nativeType	EL 原生	按钮原生 type 属性。	String	button
plain	EL 原生	是否显示为朴素按钮。	Boolean	false
text	EL 原生	是否显示为文字按钮。	Boolean	false
link	EL 原生	将表格单元格显示为链接。	Boolean	false
bg	EL 原生	文字按钮是否显示背景。	Boolean	false
autofocus	EL 原生	是否自动获取焦点。	Boolean	false
round	EL 原生	是否显示为圆角按钮。	Boolean	false
circle	EL 原生	是否显示为圆形按钮。	Boolean	false
dashed	EL 原生	是否显示为虚线按钮。	Boolean	false
color	EL 原生	按钮自定义颜色。	String	—
dark	EL 原生	自定义颜色是否使用暗色模式。	Boolean	false
autoInsertSpace	EL 原生	是否在两个中文字符之间自动插入空格。	Boolean	false
tag	EL 原生	是否将单元格显示为标签。	String / Object	button

Events 事件（1）

名称	来源	说明	参数 / 类型
click	EL 原生	点击时触发。	—

Slots 插槽（3）

名称	来源	说明	参数 / 类型
default	EL 原生	组件默认内容插槽。	—
loading	EL 原生	自定义加载状态内容。	—
icon	EL 原生	自定义按钮或组件图标。	—

Expose 暴露（7）

名称	来源	说明	参数 / 类型
ref	EL 原生	底层 Element Plus 组件引用。	—
size	EL 原生	按钮解析后的实际尺寸。	—
type	EL 原生	按钮解析后的实际类型。	—
disabled	EL 原生	按钮当前是否处于禁用状态。	—
shouldAddSpace	EL 原生	按钮是否会在两个中文字符之间自动插入空格。	—
loading	Fast 新增	Fast 业务加载状态。	—
doLoading(function)	Fast 新增	在统一 Loading 和遮罩状态下执行同步或异步函数。	(function)

FaButton 实例方法

doLoading 加载

按钮加载

签名

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

示例

<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>

输入

输入值	输入值类型	必填/默认值	输入值说明
loadingFunction	() => void | Promise<void>	是	需要在加载状态中执行的同步或异步任务。

返回

返回值	返回值类型	返回值说明
result	Promise<void>	异步完成后的结果；Promise 拒绝时由调用方处理。

状态与生命周期

doLoading 的并发调用和 click 的 done 分别持有 Loading；重复或迟到的 done 只能释放自己的任务。外部 loading 和手动写入状态独立，不关闭仍在执行的任务。卸载释放本实例遮罩，之后不启动新任务。