FaDialog 对话框

在 ElDialog 上统一拖动、全屏、刷新、Footer、异步打开/关闭和业务 Loading。调用 Expose open(function?)、close(function?) 执行业务钩子并返回 Promise；v-model 只接收内部状态回写，外部赋值不会打开或关闭 Dialog。open、close 是 Fast 业务流程完成事件，opened、closed 仍保留 Element Plus 动画生命周期。width 在所有响应式断点均由调用方控制。

异步打开、关闭与业务 Loading

查看代码

Vue

<template>
	<div class="demo-row">
		<ElButton type="primary" @click="dialogRef?.open(wait)">打开 Dialog</ElButton>
	</div>

	<FaDialog ref="dialogRef" title="编辑项目" :before-close="wait" @confirm-click="confirmDialog">
		<template #default="{ loading }">
			<ElAlert :closable="false" :title="loading ? '正在执行业务钩子…' : '内容已就绪'" type="success" />
		</template>
	</FaDialog>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";

interface ContainerExpose {
	close: (callback?: () => void | Promise<void>) => Promise<void>;
	open: (callback?: () => void | Promise<void>) => Promise<void>;
}

const dialogRef = useTemplateRef<ContainerExpose>("dialogRef");

const wait = async (): Promise<void> => {
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 600);
	});
};

const confirmDialog = (): void => {
	dialogRef.value?.close(wait);
};
</script>

afterOpen、beforeClose 与真实事件时序

查看代码

Vue

<template>
	<div class="demo-stack">
		<ElButton type="primary" @click="dialogRef?.open()">观察事件时序</ElButton>
		<div class="demo-log">
			<div v-for="item in logs" :key="item">{{ item }}</div>
			<span v-if="logs.length === 0">尚无事件</span>
		</div>
	</div>
	<FaDialog
		ref="dialogRef"
		title="异步生命周期"
		:after-open="waitOpen"
		:before-close="waitClose"
		@open="append('Fast open 事件')"
		@opened="append('Element opened 动画事件')"
		@close="append('Fast close 事件')"
		@closed="append('Element closed 动画事件')"
		@confirm-click="dialogRef?.close(waitClose)"
	>
		<template #default="{ loading }">{{ loading ? "等待业务钩子" : "业务内容已可操作" }}</template>
	</FaDialog>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from "vue";

interface DialogExpose {
	close: (callback?: () => void | Promise<void>) => Promise<void>;
	open: () => Promise<void>;
}

const dialogRef = useTemplateRef<DialogExpose>("dialogRef");
const logs = ref<string[]>([]);
const append = (message: string): void => {
	logs.value.unshift(`${new Date().toLocaleTimeString()} ${message}`);
};
const waitOpen = async (): Promise<void> => {
	append("afterOpen 开始");
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 500);
	});
	append("afterOpen 完成");
};
const waitClose = async (): Promise<void> => {
	append("beforeClose 开始");
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 500);
	});
	append("beforeClose 完成");
};
</script>

Expose 打开、全高、刷新、全屏与作用域插槽

查看代码

Vue

<template>
	<ElButton type="primary" @click="dialogRef?.open(load)">通过 Expose 打开</ElButton>
	<FaDialog ref="dialogRef" title="完整功能 Dialog" full-height style="--height: 72%" width="72%" show-before-close>
		<template #header><ElTag size="small">自定义 Header</ElTag></template>
		<template #default="{ loading }">
			<div class="demo-stack">
				<ElAlert :closable="false" :title="loading ? '业务处理中…' : '内容已就绪'" type="success" />
				<ElButton @click="dialogRef?.doLoading(load)">运行局部异步任务</ElButton>
			</div>
		</template>
		<template #footer="{ close }"><ElButton @click="close">插槽关闭</ElButton></template>
	</FaDialog>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";

interface DialogExpose {
	close: (callback?: () => void | Promise<void>) => Promise<void>;
	doLoading: (callback: () => void | Promise<void>) => Promise<void>;
	open: (callback?: () => void | Promise<void>) => Promise<void>;
}

const dialogRef = useTemplateRef<DialogExpose>("dialogRef");
const load = async (): Promise<void> => {
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 500);
	});
};
</script>

FaDialog 完整 API

Props 属性 (42)

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

属性	来源	说明	类型	默认值
alignCenter	Fast 修改	是否让 Dialog 在页面中垂直居中。	Boolean	FasttrueELfalse
draggable	Fast 修改	是否允许拖动。	Boolean	FasttrueELtrue
overflow	Fast 修改	拖动 Dialog 时是否允许超出可视区域。	Boolean	FasttrueELfalse
appendToBody	Fast 修改	是否挂载到 body。	Boolean	FasttrueELfalse
beforeClose	Fast 修改	关闭前回调。	Function	Fast—EL—
destroyOnClose	Fast 修改	关闭后是否销毁弹层内容。	Boolean	FasttrueELfalse
top	Fast 修改	Dialog 距离页面顶部的偏移。	String	Fast5vhEL—
modelValue	Fast 修改	v-model 绑定值。	Boolean	FastfalseELfalse
width	Fast 修改	组件宽度。	String / Number	Fast90%EL—
showRefresh	Fast 新增	是否显示刷新按钮。	Boolean	true
showFullscreen	Fast 新增	是否显示全屏按钮。	Boolean	true
showCloseButton	Fast 新增	是否显示底部关闭按钮。	Boolean	true
showConfirmButton	Fast 新增	是否显示底部确认按钮。	Boolean	true
disabledConfirmButton	Fast 新增	是否禁用 Fast 底部确认按钮。	Boolean	false
closeButtonText	Fast 新增	底部关闭按钮文本。	String	取消
confirmButtonText	Fast 新增	底部确认按钮文本。	String	确认
hideFooter	Fast 新增	是否隐藏底部操作区。	Boolean	false
fullHeight	Fast 新增	Dialog 内容是否占满可用高度。	Boolean	false
showBeforeClose	Fast 新增	是否在关闭前显示团队确认提示。	Boolean	false
afterOpen	Fast 新增	Fast 打开业务钩子，支持异步函数。	Function	—
center	EL 原生	是否让 Dialog 头部和底部内容水平居中。	Boolean	false
closeIcon	EL 原生	关闭按钮使用的图标组件。	String / Object / Function	—
fullscreen	EL 原生	是否让 Dialog 占满可视区域。	Boolean	false
headerClass	EL 原生	custom class names for header wrapper	String / Array / Object / Boolean	false
bodyClass	EL 原生	custom class names for body wrapper	String / Array / Object / Boolean	false
footerClass	EL 原生	custom class names for footer wrapper	String / Array / Object / Boolean	false
showClose	EL 原生	whether to show a close button	Boolean	true
title	EL 原生	组件标题文本。	String	""
ariaLevel	EL 原生	弹层标题在可访问性树中的标题层级。	String	2
appendTo	EL 原生	浮层挂载目标。	String / Object	body
closeOnClickModal	EL 原生	whether the Dialog can be closed by clicking the mask	Boolean	true
closeOnPressEscape	EL 原生	whether the Dialog can be closed by pressing ESC	Boolean	true
lockScroll	EL 原生	whether scroll of body is disabled while Dialog is displayed	Boolean	true
modal	EL 原生	whether a mask is displayed	Boolean	true
modalPenetrable	EL 原生	whether the mask is penetrable. The modal attribute must be false.	Boolean	false
openDelay	EL 原生	the Time(milliseconds) before open	Number	0
closeDelay	EL 原生	the Time(milliseconds) before close	Number	0
modalClass	EL 原生	custom class names for mask	String / Array / Object / Boolean	false
zIndex	EL 原生	same as z-index in native CSS, z-order of dialog	Number	—
trapFocus	EL 原生	弹层打开时是否将键盘焦点限制在弹层内部。	Boolean	false
headerAriaLevel	EL 原生	header's aria-level attribute	String	2
transition	EL 原生	弹层打开和关闭使用的过渡名称。	String / Object	—

Events 事件（8）

名称	来源	说明	参数 / 类型
open	EL 原生	Fast 打开业务流程完成时触发。	—
opened	EL 原生	打开动画完成时触发。	—
close	EL 原生	关闭流程完成时触发。	—
closed	EL 原生	关闭动画完成时触发。	—
update:modelValue	EL 原生	更新 v-model。	—
openAutoFocus	EL 原生	弹层打开并完成自动聚焦时触发。	—
closeAutoFocus	EL 原生	弹层关闭并完成焦点恢复时触发。	—
confirmClick	Fast 新增	点击 Fast 确认按钮时触发。	—

Slots 插槽（4）

名称	来源	说明	参数 / 类型
default({ loading })	EL 原生	组件默认内容插槽。	({ loading })
header({ loading, close })	EL 原生	自定义头部内容或表格头部业务区域。	({ loading, close })
title	EL 原生	自定义 Dialog 或 Drawer 标题。	—
footer({ loading, close })	EL 原生	自定义底部操作区域；弹层中可获得 loading 和 close。	({ loading, close })

Expose 暴露（9）

名称	来源	说明	参数 / 类型
handleClose	EL 原生	调用 Element Plus 内部关闭处理。	—
dialogContentRef	EL 原生	ElDialog 内部内容组件引用。	—
resetPosition	EL 原生	将 Dialog 恢复到初始位置。	—
loading	Fast 新增	Fast 业务加载状态。	—
visible	Fast 新增	弹层或右键菜单当前是否可见。	—
open	Fast 新增	执行 Fast 异步打开流程。	—
close	Fast 新增	执行 Fast 异步关闭流程。	—
refresh	Fast 新增	重新执行组件数据请求或刷新业务内容。	—
doLoading	Fast 新增	在统一 Loading 和遮罩状态下执行同步或异步函数。	—

FaDialog 实例方法

handleClose 关闭

调用原生关闭流程，并执行 beforeClose。

签名

handleClose(): void;

示例

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

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

const componentRef = ref<InstanceType<typeof FaDialog>>();
componentRef.value?.handleClose();
</script>

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

resetPosition 定位重置

重置位置

签名

resetPosition(): void;

示例

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

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

const componentRef = ref<InstanceType<typeof FaDialog>>();
componentRef.value?.resetPosition();
</script>

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

open 打开

打开弹窗

签名

open(openFunction?: () => void | Promise<void>): Promise<void>;

示例

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

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

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

输入

输入值	输入值类型	必填/默认值	输入值说明
openFunction	(() => void | Promise<void>) | undefined	否	打开动画前执行的可选同步或异步任务。

返回

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

close 关闭

关闭弹窗

签名

close(closeFunction?: () => void | Promise<void>): Promise<void>;

示例

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

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

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

输入

输入值	输入值类型	必填/默认值	输入值说明
closeFunction	(() => void | Promise<void>) | undefined	否	关闭动画前执行的可选同步或异步任务。

返回

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

refresh 刷新

刷新弹窗

签名

refresh(): Promise<void>;

示例

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

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

const componentRef = ref<InstanceType<typeof FaDialog>>();
const result = await componentRef.value?.refresh();
</script>

输入

该方法没有输入参数。

返回

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

doLoading 加载

弹窗加载

签名

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

示例

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

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

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

输入

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

返回

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