FaDialog

Extends ElDialog with dragging, fullscreen, refresh, a footer and asynchronous business loading. Exposed open(function?) and close(function?) methods execute business hooks and return a Promise. v-model only receives internal state updates; assigning it externally does not open or close the dialog. Fast open and close events signal completed business flows, while opened and closed retain the Element Plus animation lifecycle. The caller controls width at every breakpoint.

View code

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

View code

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

View code

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

Props (42)

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
`alignCenter`	Fast override	Vertically center the dialog.	`Boolean`	Fast`true`EL`false`
`draggable`	Fast override	Allow dragging.	`Boolean`	Fast`true`EL`true`
`overflow`	Fast override	Allow dragging the dialog beyond the viewport.	`Boolean`	Fast`true`EL`false`
`appendToBody`	Fast override	Append to body.	`Boolean`	Fast`true`EL`false`
`beforeClose`	Fast override	Callback before closing.	`Function`	Fast`—`EL`—`
`destroyOnClose`	Fast override	Destroy overlay content after closing.	`Boolean`	Fast`true`EL`false`
`top`	Fast override	Dialog offset from the page top.	`String`	Fast`5vh`EL`—`
`modelValue`	Fast override	v-model value.	`Boolean`	Fast`false`EL`false`
`width`	Fast override	Component width.	`String / Number`	Fast`90%`EL`—`
`showRefresh`	Fast addition	Show refresh button.	`Boolean`	`true`
`showFullscreen`	Fast addition	Show fullscreen button.	`Boolean`	`true`
`showCloseButton`	Fast addition	Show footer close button.	`Boolean`	`true`
`showConfirmButton`	Fast addition	Show footer confirm button.	`Boolean`	`true`
`disabledConfirmButton`	Fast addition	Disable the Fast footer confirm button.	`Boolean`	`false`
`closeButtonText`	Fast addition	Footer close-button label.	`String`	`取消`
`confirmButtonText`	Fast addition	Footer confirm-button label.	`String`	`确认`
`hideFooter`	Fast addition	Hide footer actions.	`Boolean`	`false`
`fullHeight`	Fast addition	Fill available height with dialog content.	`Boolean`	`false`
`showBeforeClose`	Fast addition	Show the team confirmation before closing.	`Boolean`	`false`
`afterOpen`	Fast addition	Fast opening hook; supports async functions.	`Function`	`—`
`center`	EL native	Horizontally center dialog header/footer content.	`Boolean`	`false`
`closeIcon`	EL native	Close-button icon.	`String / Object / Function`	`—`
`fullscreen`	EL native	Fill the viewport with the dialog.	`Boolean`	`false`
`headerClass`	EL native	custom class names for header wrapper	`String / Array / Object / Boolean`	`false`
`bodyClass`	EL native	custom class names for body wrapper	`String / Array / Object / Boolean`	`false`
`footerClass`	EL native	custom class names for footer wrapper	`String / Array / Object / Boolean`	`false`
`showClose`	EL native	whether to show a close button	`Boolean`	`true`
`title`	EL native	Component title.	`String`	`""`
`ariaLevel`	EL native	Overlay heading level in the accessibility tree.	`String`	`2`
`appendTo`	EL native	Overlay mount target.	`String / Object`	`body`
`closeOnClickModal`	EL native	whether the Dialog can be closed by clicking the mask	`Boolean`	`true`
`closeOnPressEscape`	EL native	whether the Dialog can be closed by pressing ESC	`Boolean`	`true`
`lockScroll`	EL native	whether scroll of body is disabled while Dialog is displayed	`Boolean`	`true`
`modal`	EL native	whether a mask is displayed	`Boolean`	`true`
`modalPenetrable`	EL native	whether the mask is penetrable. The modal attribute must be false.	`Boolean`	`false`
`openDelay`	EL native	the Time(milliseconds) before open	`Number`	`0`
`closeDelay`	EL native	the Time(milliseconds) before close	`Number`	`0`
`modalClass`	EL native	custom class names for mask	`String / Array / Object / Boolean`	`false`
`zIndex`	EL native	same as z-index in native CSS, z-order of dialog	`Number`	`—`
`trapFocus`	EL native	Trap keyboard focus inside the open overlay.	`Boolean`	`false`
`headerAriaLevel`	EL native	header's aria-level attribute	`String`	`2`
`transition`	EL native	Overlay opening/closing transition name.	`String / Object`	`—`

Events（8）

Name	Source	Description	Parameters / type
`open`	EL native	Fast opening business flow completes.	`—`
`opened`	EL native	Opening animation completes.	`—`
`close`	EL native	Closing flow completes.	`—`
`closed`	EL native	Closing animation completes.	`—`
`update:modelValue`	EL native	Updates v-model.	`—`
`openAutoFocus`	EL native	Overlay opens and autofocus completes.	`—`
`closeAutoFocus`	EL native	Overlay closes and focus restoration completes.	`—`
`confirmClick`	Fast addition	Fast confirm-button click.	`—`

Slots（4）

Name	Source	Description	Parameters / type
`default({ loading })`	EL native	Default component content.	`({ loading })`
`header({ loading, close })`	EL native	Custom header or table-header business content.	`({ loading, close })`
`title`	EL native	Custom dialog/drawer title.	`—`
`footer({ loading, close })`	EL native	Custom footer actions; overlays provide loading and close.	`({ loading, close })`

Expose（9）

Name	Source	Description	Parameters / type
`handleClose`	EL native	Invokes Element Plus internal closing behavior.	`—`
`dialogContentRef`	EL native	ElDialog internal content ref.	`—`
`resetPosition`	EL native	Restores the initial dialog position.	`—`
`loading`	Fast addition	Fast business loading state.	`—`
`visible`	Fast addition	Current overlay/context-menu visibility.	`—`
`open`	Fast addition	Runs the Fast asynchronous opening flow.	`—`
`close`	Fast addition	Runs the Fast asynchronous closing flow.	`—`
`refresh`	Fast addition	Repeats the data request or refreshes business content.	`—`
`doLoading`	Fast addition	Runs a sync/async function with shared loading and overlay state.	`—`

FaDialog instance methods

`handleClose` Close

Runs native closing behavior and beforeClose.

Signature

handleClose(): void;

Example

vue

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

Input

This method has no input parameters.

Returns

Value	Type	Description
`result`	`void`	No return value.

`resetPosition` Position

Resets the position.

Signature

resetPosition(): void;

Example

vue

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

Input

This method has no input parameters.

Returns

Value	Type	Description
`result`	`void`	No return value.

`open` Open

Opens the dialog.

Signature

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

Example

vue

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

Input

Input	Type	Required / default	Description
`openFunction`	`(() => void \| Promise<void>) \| undefined`	Optional	Optional synchronous/asynchronous task before the opening animation.

Returns

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

`close` Close

Closes the dialog.

Signature

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

Example

vue

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

Input

Input	Type	Required / default	Description
`closeFunction`	`(() => void \| Promise<void>) \| undefined`	Optional	Optional synchronous/asynchronous task before the closing animation.

Returns

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

`refresh` Refresh

Refreshes the dialog.

Signature

refresh(): Promise<void>;

Example

vue

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

Input

This method has no input parameters.

Returns

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

`doLoading` Loading

Runs a task with dialog loading state.

Signature

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

Example

vue

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

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.

FaDialog

Basic

Lifecycle

Dialog Features

FaDialog Complete API

FaDialog instance methods

`handleClose` Close

Signature

Example

Input

Returns

`resetPosition` Position

Signature

Example

Input

Returns

`open` Open

Signature

Example

Input

Returns

`close` Close

Signature

Example

Input

Returns

`refresh` Refresh

Signature

Example

Input

Returns

`doLoading` Loading

Signature

Example

Input

Returns

FaDialog ​

FaDialog Complete API

FaDialog instance methods ​

handleClose Close ​

Signature ​

Example ​

Input ​

Returns ​

resetPosition Position ​

Signature ​

Example ​

Input ​

Returns ​

open Open ​

Signature ​

Example ​

Input ​

Returns ​

close Close ​

Signature ​

Example ​

Input ​

Returns ​

refresh Refresh ​

Signature ​

Example ​

Input ​

Returns ​

doLoading Loading ​

Signature ​

Example ​

Input ​

Returns ​

FaDialog

FaDialog instance methods

`handleClose` Close

Signature

Example

Input

Returns

`resetPosition` Position

Signature

Example

Input

Returns

`open` Open

Signature

Example

Input

Returns

`close` Close

Signature

Example

Input

Returns

`refresh` Refresh

Signature

Example

Input

Returns

`doLoading` Loading

Signature

Example

Input

Returns