ProDrawer 超级抽屉

基础用法

<script setup lang="tsx" name="UseDrawerDemo">
import { ref } from "vue";
import { useDrawer, ProDrawer } from "@/components/pro/drawer";

const visible = ref(false);

const { open } = useDrawer();

const openDrawer = () => {
  open({
    title: "ProDrawer 弹框",
    render: () => <el-button onClick={() => againOpenDrawer()}>使用函数打开 Drawer</el-button>,
  });
};

const againOpenDrawer = () => {
  open({
    title: "ProDrawer 弹框",
    size: "60%",
    render: () => <div>我被函数再次打开</div>,
  });
};
</script>

<template>
  <el-button @click="openDrawer()">函数式打开 Drawer</el-button>

  <el-button @Click="visible = true">组件式打开 Drawer 组件</el-button>

  <ProDrawer v-model="visible">我是通过 modelValue 打开的 Drawer 组件</ProDrawer>
</template>

隐藏源代码

Attributes

属性名	说明	类型	默认值
title	顶部标题	string	''
fullscreen	是否默认全屏	boolean	false
fullscreenIcon	是否渲染全屏图标	boolean	true
showFooter	是否渲染底部	boolean	true
footerAlign	底部对齐方式	string	right
confirmLoading	确认按钮 loading	boolean	false
confirmText	确认按钮文字	string	确认
cancelText	关闭按钮文字	string	关闭
...	其他扩展属性，支持所有 ElDrawer Attributes	...	...

函数式抽屉独有的属性

属性名	说明	类型	默认值
render	自定义内容渲染	function	—
renderHeader	自定义头部渲染	function	—
renderFooterBefore	自定义底部前渲染	function	—
renderFooter	自定义底部渲染	function	—
renderFooterAfter	自定义底部后渲染	function	—
onConfirm	确认按钮点击事件	function	—
onCancel	关闭按钮点击事件	function	—
onFullscreen	全屏切换事件	function	—

RenderTypes 类型

渲染函数的返回值的类型

/**
 * 渲染函数的返回值的类型
 */
export type RenderTypes = string | VNode | JSX.Element | Component;

DrawerRenderParams 类型

渲染函数的参数类型

/**
 * Render 相关函数的参数
 */
export type DrawerRenderParams = {
  handleConfirm: () => void;
  handleCancel: () => void;
};

Events

名称	说明	类型
cancel	取消事件	function
confirm	确认事件	function
fullscreen	全屏切换事件	function

Slots

插槽名	说明	作用域插槽参数
header	自定义头部	object
header-title	自定义头部标题	—
fullscreen-icon	自定义全屏图标	object
footer-before	自定义底部前	object
footer	自定义底部	object
footer-after	自定义底部后	object
...	其他扩展属性，支持所有 ElDrawer Slots	...

Exposes

名称	说明	类型
elDrawerInstance	ElDrawer 实例	object
handleConfirm	确认事件处理	function
handleCancel	取消事件处理	function
open	打开抽屉	function
close	关闭抽屉	function