FaDrawer

Uses the same business lifecycle and footer conventions as FaDialog. Exposed open(function?) and close(function?) return a Promise; v-model only receives internal state updates. All four directions support edge resizing and retain slide-in/slide-out animations. The caller controls size at every breakpoint.

View code

<template>
	<ElButton type="primary" @click="drawerRef?.open(wait)">异步打开 Drawer</ElButton>
	<FaDrawer ref="drawerRef" title="项目详情" size="42%" :before-close="wait" @confirm-click="confirm">
		<template #default="{ loading }">
			<ElAlert :closable="false" :title="loading ? '正在执行业务钩子…' : '内容已就绪'" type="success" />
		</template>
	</FaDrawer>
</template>

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

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

const drawerRef = useTemplateRef<DrawerExpose>("drawerRef");
const wait = async (): Promise<void> => {
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 600);
	});
};
const confirm = (): void => {
	drawerRef.value?.close(wait);
};
</script>

View code

<template>
	<div class="demo-row">
		<ElButton @click="open('ltr')">从左侧打开</ElButton>
		<ElButton type="primary" @click="open('rtl')">从右侧打开</ElButton>
		<ElButton @click="open('ttb')">从顶部打开</ElButton>
		<ElButton @click="open('btt')">从底部打开</ElButton>
	</div>
	<FaDrawer ref="drawerRef" :direction="direction" :size="direction === 'rtl' || direction === 'ltr' ? '42%' : '45%'" title="可拖动 Drawer">
		<div class="demo-stack">
			<ElAlert :closable="false" title="拖动内容边缘可改变 Drawer 尺寸" type="info" />
			<p>当前方向：{{ direction }}</p>
		</div>
	</FaDrawer>
</template>

<script setup lang="ts">
import { nextTick, ref, useTemplateRef } from "vue";
import type { DrawerProps } from "element-plus";

const drawerRef = useTemplateRef<{ open: () => Promise<void> }>("drawerRef");
const direction = ref<DrawerProps["direction"]>("rtl");

const open = async (value: DrawerProps["direction"]): Promise<void> => {
	direction.value = value;
	await nextTick();
	await drawerRef.value?.open();
};
</script>

FaDrawer Complete API

Props (46)

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
`draggable`	Fast override	Allow dragging.	`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`
`modelValue`	Fast override	v-model value.	`Boolean`	Fast`false`EL`false`
`resizable`	Fast override	Allow drawer resizing.	`Boolean`	Fast`false`EL`false`
`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`
`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`
`alignCenter`	EL native	Vertically center the dialog.	`Boolean`	`false`
`closeIcon`	EL native	Close-button icon.	`String / Object / Function`	`—`
`overflow`	EL native	Allow dragging the dialog beyond the viewport.	`Boolean`	`false`
`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	Should show close button at the top right of Drawer	`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 Drawer can be closed by clicking the mask	`Boolean`	`true`
`closeOnPressEscape`	EL native	Indicates whether Drawer can be closed by pressing ESC	`Boolean`	`true`
`lockScroll`	EL native	whether scroll of body is disabled while Drawer is displayed	`Boolean`	`true`
`modal`	EL native	Should show shadowing layer	`Boolean`	`true`
`modalPenetrable`	EL native	whether the mask is penetrable. The modal attribute must be false.	`Boolean`	`false`
`openDelay`	EL native	Time(milliseconds) before open	`Number`	`0`
`closeDelay`	EL native	Time(milliseconds) before close	`Number`	`0`
`top`	EL native	Dialog offset from the page top.	`String`	`—`
`modalClass`	EL native	Extra class names for shadowing layer	`String / Array / Object / Boolean`	`false`
`width`	EL native	Component width.	`String / Number`	`—`
`zIndex`	EL native	set z-index	`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`	`—`
`direction`	EL native	Drawer's opening direction	`String`	`rtl`
`size`	EL native	Component size.	`String / Number`	`30%`
`withHeader`	EL native	Flag that controls the header section's existence, default to true, when withHeader set to false, both title attribute and title slot won't work	`Boolean`	`true`
`modalFade`	EL native	Fade the drawer overlay.	`Boolean`	`true`

Events（11）

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.	`—`
`resize-start`	EL native	Drawer resizing starts.	`—`
`resize`	EL native	Continuously emitted while drawer size changes during dragging.	`—`
`resize-end`	EL native	Drawer resizing ends.	`—`
`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（7）

Name	Source	Description	Parameters / type
`handleClose`	EL native	Invokes Element Plus internal closing behavior.	`—`
`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.	`—`

FaDrawer instance methods

`handleClose` Close

Closes the drawer, invoking the supplied before-close hook.

Signature

handleClose(): void;

Example

vue

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

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

const componentRef = ref<InstanceType<typeof FaDrawer>>();
componentRef.value?.handleClose();
</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>
	<FaDrawer ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaDrawer>>();
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>
	<FaDrawer ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaDrawer>>();
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>
	<FaDrawer ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaDrawer>>();
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>
	<FaDrawer ref="componentRef" />
</template>

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

const componentRef = ref<InstanceType<typeof FaDrawer>>();
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.

FaDrawer

Drawer Basic

Drawer Directions

FaDrawer Complete API

FaDrawer instance methods

`handleClose` Close

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

FaDrawer ​

FaDrawer Complete API

FaDrawer instance methods ​

handleClose Close ​

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 ​

FaDrawer

FaDrawer instance methods

`handleClose` Close

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