Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 新增函数式抽屉组件 #1183

Merged
merged 7 commits into from
Sep 25, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: update
xiaoxian521 committed Sep 25, 2024
commit 0a121fc7b523a16e6e4b7f7c1a00513c0d6b60cd
24 changes: 13 additions & 11 deletions src/components/ReDrawer/type.ts
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import type { CSSProperties, VNode, Component } from "vue";
type DoneFn = (cancel?: boolean) => void;
type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
type ArgsType = {
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了 `esc` 键 */
command: "cancel" | "sure" | "close";
};

@@ -20,15 +20,15 @@ type DrawerProps = {
visible?: boolean;
/** `Drawer` 自身是否插入至 `body` 元素上。嵌套的 `Drawer` 必须指定该属性并赋值为 `true`,默认 `false` */
appendToBody?: boolean;
/** 挂载到哪个DOM元素 将覆盖appendToBody */
/** 挂载到哪个 `DOM` 元素 将覆盖 `appendToBody` */
appendTo?: string;
/** 是否在Drawer出现时将body滚动锁定,默认 `true` */
/** 是否在 `Drawer` 出现时将 `body` 滚动锁定,默认 `true` */
lockScroll?: boolean;
/** 关闭前的回调,会暂停 `Drawer` 的关闭 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
beforeClose?: (done: DoneFn) => void;
/** 是否可以通过点击 modal 关闭 Drawer ,默认 `true` */
/** 是否可以通过点击 `modal` 关闭 `Drawer` ,默认 `true` */
closeOnClickModal?: boolean;
/** 是否可以通过按下 ESC 关闭 Drawer ,默认 `true` */
/** 是否可以通过按下 `ESC` 关闭 `Drawer` ,默认 `true` */
closeOnPressEscape?: boolean;
/** 是否显示关闭按钮,默认 `true` */
showClose?: boolean;
@@ -40,22 +40,24 @@ type DrawerProps = {
class?: string;
/** `Drawer` 的自定义样式 */
style?: CSSProperties;
/** 控制是否在关闭 Drawer 之后将子元素全部销毁 默认false */
/** 控制是否在关闭 `Drawer` 之后将子元素全部销毁,默认 `false` */
destroyOnClose?: boolean;
/** 是否需要遮罩层 默认true */
/** 是否需要遮罩层,默认 `true` */
modal?: boolean;
/** Drawer 打开的方向 默认 `rtl` */
/** `Drawer` 打开的方向默认 `rtl` */
direction?: "rtl" | "ltr" | "ttb" | "btt";
/** Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释 */
/** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释 */
size?: string | number;
/** `Drawer` 的标题 */
title?: string;
/** 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 */
/** 控制是否显示 `header` 栏, 默认为 `true`, 当此项为 `false` 时, `title attribute``title slot` 均不生效 */
withHeader?: boolean;
/** 遮罩层的自定义类名 */
modalClass?: string;
/** 设置 z-index */
/** 设置 `z-index` */
zIndex?: number;
/** `header` 的 `aria-level` 属性,默认 `2` */
headerAriaLevel?: string;
};

//element-plus.org/zh-CN/component/popConfirm.html#attributes