ProDrawer 抽屉

ProDrawer 抽屉 的基础用法、公开 API 与示例。

基础示例

通过 useDrawer 打开内容抽屉。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { useDrawer } from "@/components/pro/drawer";

const { open } = useDrawer();

const openDrawer = () => {
  open({
    title: "ProDrawer",
    render: () => "这里是 useDrawer 渲染内容",
  });
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="openDrawer">打开抽屉</el-button>
    </div>
  </ClientOnly>
</template>

隐藏源代码

带操作抽屉

展示抽屉确认、取消和宽度配置。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { useDrawer } from "@/components/pro/drawer";

const { open } = useDrawer();
const result = ref("等待操作");

const openDrawer = () => {
  open({
    title: "资料详情",
    size: "420px",
    confirmText: "保存",
    cancelText: "关闭",
    render: () => "这里可以展示详情、审批记录或辅助配置。",
    onConfirm: () => {
      result.value = "已保存";
    },
    onCancel: () => {
      result.value = "已关闭";
    },
  });
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="openDrawer">打开操作抽屉</el-button>
      <span class="drawer-result">{{ result }}</span>
    </div>
  </ClientOnly>
</template>

<style scoped>
.drawer-result {
  margin-left: 12px;
  color: #667085;
}
</style>

隐藏源代码

引入方式

import { ProDrawer, useDrawer } from "@/components/pro/drawer";

Props

参数	说明	类型	默认值	必填
title	顶部标题	string	"抽屉"	否
fullscreen	是否默认全屏	boolean	false	否
fullscreenIcon	是否渲染全屏图标	boolean	true	否
showFooter	是否渲染底部	boolean	true	否
footerAlign	底部对齐方式	"left" | "right" | "center"	"right"	否
confirmLoading	确认按钮 loading	boolean	false	否
confirmText	确认按钮文字	string	"确认"	否
cancelText	关闭按钮文字	string	"关闭"	否
render	自定义内容渲染	() => RenderTypes	-	否
renderHeader	自定义头部渲染	(scope: unknown) => RenderTypes	-	否
renderFooterBefore	自定义底部前方渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
renderFooter	自定义底部渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
renderFooterAfter	自定义底部前方渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
onConfirm	确认按钮点击事件	(closeDrawer: () => void) => unknown	-	否
onCancel	关闭按钮点击事件	(closeDrawer: () => void) => unknown	-	否
onFullscreen	全屏切换事件	(isFullscreen: boolean) => void	-	否
modelValue	组件双向绑定值。	boolean	-	是

Events

事件名	说明	回调参数
cancel	点击取消操作时触发。	-
confirm	点击确认操作时触发。	-
close	关闭时触发。	-
fullscreen	fullscreen 事件触发时回调。	isFullscreen: boolean
update:modelValue	双向绑定值更新时触发。	value: boolean

Slots

插槽名	说明	参数
header	头部内容插槽。	-
header-title	header-title 内容插槽。	-
fullscreen-icon	fullscreen-icon 内容插槽。	-

Expose

名称	说明	类型
elDrawerInstance	暴露 elDrawerInstance 给外部调用。	-
handleConfirm	执行确认操作。	-
handleCancel	执行取消操作。	-
open	打开组件。	-
close	关闭组件。	-

Module API

名称	说明	类型
useDrawer	导出 useDrawer 供业务侧复用。	(ctx?: ComponentInternalInstance) => unknown

Types

ProDrawerProps

导出 ProDrawerProps 供业务侧复用。

字段	说明	类型	默认值	必填
title	顶部标题	string	''	否
fullscreen	是否默认全屏	boolean	false	否
fullscreenIcon	是否渲染全屏图标	boolean	true	否
showFooter	是否渲染底部	boolean	true	否
footerAlign	底部对齐方式	"left" | "right" | "center"	'right'	否
confirmLoading	确认按钮 loading	boolean	false	否
confirmText	确认按钮文字	string	'确认'	否
cancelText	关闭按钮文字	string	'关闭'	否
render	自定义内容渲染	() => RenderTypes	-	否
renderHeader	自定义头部渲染	(scope: unknown) => RenderTypes	-	否
renderFooterBefore	自定义底部前方渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
renderFooter	自定义底部渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
renderFooterAfter	自定义底部前方渲染	(scope: DrawerRenderParams) => RenderTypes	-	否
onConfirm	确认按钮点击事件	(closeDrawer: () => void) => unknown	-	否
onCancel	关闭按钮点击事件	(closeDrawer: () => void) => unknown	-	否
onFullscreen	全屏切换事件	(isFullscreen: boolean) => void	-	否

DrawerRenderParams

Render 相关函数的参数

字段	说明	类型	默认值	必填
handleConfirm	配置 handleConfirm。	() => void	-	是
handleCancel	配置 handleCancel。	() => void	-	是

ProDrawerEmits

导出 ProDrawerEmits 供业务侧复用。

字段	说明	类型	默认值	必填
cancel	配置 cancel。	[]	-	是
confirm	配置 confirm。	[]	-	是
close	配置 close。	[]	-	是
fullscreen	配置 fullscreen。	[isFullscreen: boolean]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。