diff --git a/src/components/ReDrawer/type.ts b/src/components/ReDrawer/type.ts index b2eaeb969..236f9ae4a 100644 --- a/src/components/ReDrawer/type.ts +++ b/src/components/ReDrawer/type.ts @@ -6,7 +6,6 @@ type ArgsType = { /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了 `esc` 键 */ command: "cancel" | "sure" | "close"; }; - type ButtonType = | "primary" | "success" @@ -20,11 +19,11 @@ type DrawerProps = { visible?: boolean; /** `Drawer` 自身是否插入至 `body` 元素上。嵌套的 `Drawer` 必须指定该属性并赋值为 `true`,默认 `false` */ appendToBody?: boolean; - /** 挂载到哪个 `DOM` 元素 将覆盖 `appendToBody` */ + /** 挂载到哪个 `DOM` 元素,会覆盖 `appendToBody` 属性,默认 `body` */ appendTo?: string; /** 是否在 `Drawer` 出现时将 `body` 滚动锁定,默认 `true` */ lockScroll?: boolean; - /** 关闭前的回调,会暂停 `Drawer` 的关闭 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */ + /** 关闭前的回调,会暂停 `Drawer` 的关闭,回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */ beforeClose?: (done: DoneFn) => void; /** 是否可以通过点击 `modal` 关闭 `Drawer` ,默认 `true` */ closeOnClickModal?: boolean; @@ -44,9 +43,13 @@ type DrawerProps = { destroyOnClose?: boolean; /** 是否需要遮罩层,默认 `true` */ modal?: boolean; + /** 是否允许穿透遮罩层,默认 `false`。使用时需将 `modal` 属性设置为 `false` */ + modalPenetrable?: boolean; /** `Drawer` 打开的方向,默认 `rtl` */ direction?: "rtl" | "ltr" | "ttb" | "btt"; - /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释 */ + /** 是否启用可调整大小的功能,默认 `false` */ + resizable?: boolean; + /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释,默认 `30%` */ size?: string | number; /** `Drawer` 的标题 */ title?: string; @@ -54,6 +57,12 @@ type DrawerProps = { withHeader?: boolean; /** 遮罩层的自定义类名 */ modalClass?: string; + /** `header` 部分的自定义 `class` 名 */ + headerClass?: string; + /** `body` 部分的自定义 `class` 名 */ + bodyClass?: string; + /** `footer` 部分的自定义 `class` 名 */ + footerClass?: string; /** 设置 `z-index` */ zIndex?: number; /** `header` 的 `aria-level` 属性,默认 `2` */ diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx index bd9e0492d..b00486e7f 100644 --- a/src/components/RePureTableBar/src/bar.tsx +++ b/src/components/RePureTableBar/src/bar.tsx @@ -100,7 +100,7 @@ export default defineComponent({ "pt-[3px]", "px-[11px]", "border-b-[1px]", - "border-solid", + "border-b-solid", "border-[#dcdfe6]", "dark:border-[#303030]" ]; diff --git a/src/components/ReVxeTableBar/src/bar.tsx b/src/components/ReVxeTableBar/src/bar.tsx index 7b8820437..aaca2c894 100644 --- a/src/components/ReVxeTableBar/src/bar.tsx +++ b/src/components/ReVxeTableBar/src/bar.tsx @@ -93,7 +93,7 @@ export default defineComponent({ "pt-[3px]", "px-[11px]", "border-b-[1px]", - "border-solid", + "border-b-solid", "border-[#dcdfe6]", "dark:border-[#303030]" ]; diff --git a/src/views/components/drawer/index.vue b/src/views/components/drawer/index.vue index bc952cbad..4004b2412 100644 --- a/src/views/components/drawer/index.vue +++ b/src/views/components/drawer/index.vue @@ -422,6 +422,17 @@ function onSureBtnLoading() { } }); } + +function onResizableClick(title, content, direction) { + addDrawer({ + title, + direction, + resizable: true, // 启用可调整大小的功能 + contentRenderer: () => ( +

{content}

// jsx 语法 (注意在.vue文件启用jsx语法,需要在script开启lang="tsx") + ) + }); +}