FaDrawer 抽屉

使用与 FaDialog 相同的业务生命周期和 Footer 约定，通过返回 Promise 的 Expose open(function?)、close(function?) 控制显示；v-model 只接收内部状态回写。四个方向均支持拖动边缘改变尺寸，打开和关闭保留滑入、滑出动画，size 在所有响应式断点均由调用方控制。

异步打开、关闭与业务 Loading

查看代码

Vue

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

四个打开方向与拖动调整尺寸

查看代码

Vue

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

Props 属性 (46)

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

属性	来源	说明	类型	默认值
draggable	Fast 修改	是否允许拖动。	Boolean	FasttrueELfalse
appendToBody	Fast 修改	是否挂载到 body。	Boolean	FasttrueELfalse
beforeClose	Fast 修改	关闭前回调。	Function	Fast—EL—
destroyOnClose	Fast 修改	关闭后是否销毁弹层内容。	Boolean	FasttrueELfalse
modelValue	Fast 修改	v-model 绑定值。	Boolean	FastfalseELfalse
resizable	Fast 修改	是否允许调整 Drawer 尺寸。	Boolean	FastfalseELfalse
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
showBeforeClose	Fast 新增	是否在关闭前显示团队确认提示。	Boolean	false
afterOpen	Fast 新增	Fast 打开业务钩子，支持异步函数。	Function	—
center	EL 原生	是否让 Dialog 头部和底部内容水平居中。	Boolean	false
alignCenter	EL 原生	是否让 Dialog 在页面中垂直居中。	Boolean	false
closeIcon	EL 原生	关闭按钮使用的图标组件。	String / Object / Function	—
overflow	EL 原生	拖动 Dialog 时是否允许超出可视区域。	Boolean	false
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 原生	Should show close button at the top right of Drawer	Boolean	true
title	EL 原生	组件标题文本。	String	""
ariaLevel	EL 原生	弹层标题在可访问性树中的标题层级。	String	2
appendTo	EL 原生	浮层挂载目标。	String / Object	body
closeOnClickModal	EL 原生	whether the Drawer can be closed by clicking the mask	Boolean	true
closeOnPressEscape	EL 原生	Indicates whether Drawer can be closed by pressing ESC	Boolean	true
lockScroll	EL 原生	whether scroll of body is disabled while Drawer is displayed	Boolean	true
modal	EL 原生	Should show shadowing layer	Boolean	true
modalPenetrable	EL 原生	whether the mask is penetrable. The modal attribute must be false.	Boolean	false
openDelay	EL 原生	Time(milliseconds) before open	Number	0
closeDelay	EL 原生	Time(milliseconds) before close	Number	0
top	EL 原生	Dialog 距离页面顶部的偏移。	String	—
modalClass	EL 原生	Extra class names for shadowing layer	String / Array / Object / Boolean	false
width	EL 原生	组件宽度。	String / Number	—
zIndex	EL 原生	set z-index	Number	—
trapFocus	EL 原生	弹层打开时是否将键盘焦点限制在弹层内部。	Boolean	false
headerAriaLevel	EL 原生	header's aria-level attribute	String	2
transition	EL 原生	弹层打开和关闭使用的过渡名称。	String / Object	—
direction	EL 原生	Drawer's opening direction	String	rtl
size	EL 原生	组件尺寸。	String / Number	30%
withHeader	EL 原生	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 原生	Drawer 遮罩层是否使用淡入淡出动画。	Boolean	true

Events 事件（11）

名称	来源	说明	参数 / 类型
open	EL 原生	Fast 打开业务流程完成时触发。	—
opened	EL 原生	打开动画完成时触发。	—
close	EL 原生	关闭流程完成时触发。	—
closed	EL 原生	关闭动画完成时触发。	—
update:modelValue	EL 原生	更新 v-model。	—
openAutoFocus	EL 原生	弹层打开并完成自动聚焦时触发。	—
closeAutoFocus	EL 原生	弹层关闭并完成焦点恢复时触发。	—
resize-start	EL 原生	Drawer 开始拖动调整尺寸时触发。	—
resize	EL 原生	Drawer 拖动过程中尺寸变化时持续触发。	—
resize-end	EL 原生	Drawer 拖动调整尺寸结束时触发。	—
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 暴露（7）

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

FaDrawer 实例方法

handleClose 关闭

用于关闭 Drawer, 该方法会调用传入的 before-close 方法

签名

handleClose(): void;

示例

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

输入

该方法没有输入参数。

返回

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

open 打开

打开弹窗

签名

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

示例

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

输入

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

返回

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

close 关闭

关闭弹窗

签名

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

示例

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

输入

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

返回

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

refresh 刷新

刷新弹窗

签名

refresh(): Promise<void>;

示例

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

输入

该方法没有输入参数。

返回

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

doLoading 加载

弹窗加载

签名

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

示例

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

输入

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

返回

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