Browse Source
* feat: 更新到rc-dialog@8.3.0 添加Modal组件对拖拽的支持。 * fix: test case * Update components/drawer/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * fix: 修复文档版本修改为4.7.0, 文档的order改为13最后一个，指针改为move * fix: 修改API的顺序，按照字母顺序进行排列 * fix: 修复一些讨论的问题 * fix: test case * fix: 修改Demo的Modal的Button的显示方式，进行竖着排列 * docs: 去掉多余的demo Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>pull/26767/head
zhangj
4 years ago
committed by
GitHub
GitHub
5 changed files with 113 additions and 1 deletions
@ -0,0 +1,98 @@ |
|||
--- |
|||
order: 13 |
|||
title: |
|||
zh-CN: 自定义渲染对话框 |
|||
en-US: Custom modal content render |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。 |
|||
|
|||
## en-US |
|||
|
|||
Custom modal content render. use `react-draggable` implements draggable. |
|||
|
|||
```jsx |
|||
import { Modal, Button } from 'antd'; |
|||
import Draggable from 'react-draggable'; |
|||
|
|||
class App extends React.Component { |
|||
state = { |
|||
visible: false, |
|||
disabled: true, |
|||
}; |
|||
|
|||
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 ( |
|||
<> |
|||
<Button onClick={this.showModal}> |
|||
Open Draggable Modal |
|||
</Button> |
|||
<Modal |
|||
title={ |
|||
<div |
|||
style={{ |
|||
width: '100%', |
|||
cursor: 'move', |
|||
}} |
|||
onMouseOver={() => { |
|||
if (this.state.disabled) { |
|||
this.setState({ |
|||
disabled: true, |
|||
}); |
|||
} |
|||
}} |
|||
onMouseOut={() => { |
|||
this.setState({ |
|||
disabled: false, |
|||
}); |
|||
}} |
|||
// fix eslintjsx-a11y/mouse-events-have-key-events |
|||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md |
|||
onFocus={() => {}} |
|||
onBlur={() => {}} |
|||
// end |
|||
> |
|||
Draggable Modal |
|||
</div> |
|||
} |
|||
visible={this.state.visible} |
|||
onOk={this.handleOk} |
|||
onCancel={this.handleCancel} |
|||
modalRender={modal => <Draggable disabled={this.state.disabled}>{modal}</Draggable>} |
|||
> |
|||
<p> |
|||
Just don't learn physics at school and your life will be full of magic and |
|||
miracles. |
|||
</p> |
|||
<br /> |
|||
<p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p> |
|||
</Modal> |
|||
</> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<App />, mountNode); |
|||
``` |
|||
Loading…
Reference in new issue