feat(drawer): 传入 confirmBtnProps 和 cancelButtonProps 可分别自定义按钮

src/drawer/Drawer.tsx

@@ -53,6 +53,8 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
     zIndex,
     destroyOnClose,
     sizeDraggable,
+    cancelBtnProps,
+    confirmBtnProps,
   } = props;
 
   // 国际化文本初始化
@@ -121,13 +123,13 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
     if (footer !== true) return footer;
 
     const defaultCancelBtn = (
-      <Button theme="default" onClick={onCancelClick} className={`${prefixCls}__cancel`}>
+      <Button theme="default" onClick={onCancelClick} className={`${prefixCls}__cancel`} {...cancelBtnProps}>
         {cancelBtn && typeof cancelBtn === 'string' ? cancelBtn : cancelText}
       </Button>
     );
 
     const defaultConfirmBtn = (
-      <Button theme="primary" onClick={onConfirmClick} className={`${prefixCls}__confirm`}>
+      <Button theme="primary" onClick={onConfirmClick} className={`${prefixCls}__confirm`} {...confirmBtnProps}>
         {confirmBtn && typeof confirmBtn === 'string' ? confirmBtn : confirmText}
       </Button>
     );

src/drawer/_example/customized-button-props.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Drawer, Button } from 'tdesign-react';
+
+export default function () {
+  const [visible, setVisible] = useState(false);
+
+  const handleClick = () => {
+    setVisible(true);
+  };
+  const handleClose = () => {
+    setVisible(false);
+  };
+  return (
+    <>
+      <Button theme="primary" onClick={handleClick}>
+        打开抽屉
+      </Button>
+      <Drawer 
+        header="抽屉标题" 
+        visible={visible} 
+        onClose={handleClose} c
+        cancelBtnProps={{ disabled: true  }} 
+        confirmBtnProps={{ disabled: true  }} 
+        cancelBtn={'取消'}
+      >
+        <p>抽屉的内容</p>
+      </Drawer>
+    </>
+  );
+}

src/drawer/drawer.md

@@ -9,12 +9,14 @@ className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 attach | String / Function | - | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 body | TNode | - | 抽屉内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N
+cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N
+cancelBtnProps | ButtonProps | - | [Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
 children | TNode | - | 抽屉内容，同 body。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeBtn | TNode | - | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N
 closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
-confirmBtn | TNode | - | 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
+confirmBtn | TNode | - | 确认按钮。值类型为字符串。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string \| TNode`，[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
+confirmBtnProps | ButtonProps | - | [Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
 destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
 footer | TNode | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

src/drawer/type.ts

@@ -21,6 +21,10 @@ export interface TdDrawerProps {
    * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
    */
   cancelBtn?: FooterButton;
+  /**
+   * 取消按钮属性，值类型为 Object 则表示透传 Button 组件属性
+   */
+  cancelBtnProps?: ButtonProps;
   /**
    * 抽屉内容，同 body
    */
@@ -41,6 +45,10 @@ export interface TdDrawerProps {
    * 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
    */
   confirmBtn?: FooterButton;
+  /**
+   * 取消按钮属性，值类型为 Object 则表示透传 Button 组件属性
+   */
+  confirmBtnProps?: ButtonProps;
   /**
    * 抽屉关闭时是否销毁节点
    * @default false
@@ -161,7 +169,7 @@ export interface DrawerInstance {
   update?: (props: DrawerOptions) => void;
 }
 
-export type FooterButton = string | ButtonProps | TNode;
+export type FooterButton = string | TNode;
 
 export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';