diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index a4a13cc8ef..4a865c773f 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -3,7 +3,7 @@ import Dialog from 'rc-dialog'; import PropTypes from 'prop-types'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import Button from '../button'; -import { ButtonType } from '../button/button'; +import { ButtonType, NativeButtonProps } from '../button/button'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { getConfirmLocale } from './locale'; @@ -36,6 +36,8 @@ export interface ModalProps { cancelText?: string; /** 点击蒙层是否允许关闭*/ maskClosable?: boolean; + okButtonProps?: NativeButtonProps; + cancelButtonProps?: NativeButtonProps; destroyOnClose?: boolean; style?: React.CSSProperties; wrapClassName?: string; @@ -98,6 +100,8 @@ export default class Modal extends React.Component { confirmLoading: false, visible: false, okType: 'primary' as ButtonType, + okButtonDisabled: false, + cancelButtonDisabled: false, }; static propTypes = { @@ -153,6 +157,7 @@ export default class Modal extends React.Component {
@@ -160,6 +165,7 @@ export default class Modal extends React.Component { type={okType} loading={confirmLoading} onClick={this.handleOk} + {...this.props.okButtonProps} > {okText || locale.okText} diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md new file mode 100644 index 0000000000..1a2f941a99 --- /dev/null +++ b/components/modal/demo/button-props.md @@ -0,0 +1,59 @@ +--- +order: 11 +title: + zh-CN: 自定义页脚按钮属性 + en-US: Customize footer buttons props +--- + +## zh-CN + +传入 `okButtonProps` 和 `cancelButtonProps` 可分别自定义确定按钮和取消按钮的 props。 + +## en-US + +Passing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props. + +````jsx +import { Modal, Button } from 'antd'; + +class App extends React.Component { + state = { visible: false } + showModal = () => { + this.setState({ + visible: true, + }); + } + handleOk = (e) => { + console.log(e); + this.setState({ + visible: false, + }); + } + handleCancel = (e) => { + console.log(e); + this.setState({ + visible: false, + }); + } + render() { + return ( +
+ + +

Some contents...

+

Some contents...

+

Some contents...

+
+
+ ); + } +} + +ReactDOM.render(, mountNode); diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 65c6c52acc..931fbe6e07 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -31,6 +31,8 @@ and so on. | maskStyle | Style for modal's mask element. | object | {} | | okText | Text of the OK button | string | `OK` | | okType | Button `type` of the OK button | string | `primary` | +| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | +| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | | style | Style of floating layer, typically used at least for adjusting the position. | object | - | | title | The modal dialog's title | string\|ReactNode | - | | visible | Whether the modal dialog is visible or not | boolean | false | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 115cd6eecb..146c9d392d 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -30,6 +30,8 @@ title: Modal | maskStyle | 遮罩样式 | object | {} | | okText | 确认按钮文字 | string | 确定 | | okType | 确认按钮类型 | string | primary | +| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | +| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | | style | 可用于设置浮层的样式,调整浮层位置等 | object | - | | title | 标题 | string\|ReactNode | 无 | | visible | 对话框是否可见 | boolean | 无 |