mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
support mousePosition
This commit is contained in:
parent
4af25dffb2
commit
867c4f2a85
@ -72,7 +72,6 @@ export default function (props) {
|
||||
React.render(<Dialog
|
||||
prefixCls="ant-modal"
|
||||
className="ant-confirm"
|
||||
renderToBody={false}
|
||||
visible={true}
|
||||
closable={false}
|
||||
title=""
|
||||
|
@ -15,9 +15,10 @@ var Test = React.createClass({
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
showModal() {
|
||||
showModal(e) {
|
||||
this.setState({
|
||||
visible: true
|
||||
visible: true,
|
||||
mousePosition:{x:e.pageX,y:e.pageY}
|
||||
});
|
||||
},
|
||||
handleOk() {
|
||||
@ -37,6 +38,7 @@ var Test = React.createClass({
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
|
||||
<Modal title="第一个 Modal"
|
||||
visible={this.state.visible}
|
||||
mousePosition={this.state.mousePosition}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}>
|
||||
<p>对话框的内容</p>
|
||||
|
@ -17,9 +17,10 @@ var Test = React.createClass({
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
showModal() {
|
||||
showModal(e) {
|
||||
this.setState({
|
||||
visible: true
|
||||
visible: true,
|
||||
mousePosition:{x:e.pageX,y:e.pageY}
|
||||
});
|
||||
},
|
||||
handleOk() {
|
||||
@ -42,6 +43,7 @@ var Test = React.createClass({
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
|
||||
<Modal title="对话框标题"
|
||||
mousePosition={this.state.mousePosition}
|
||||
visible={this.state.visible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}>
|
||||
|
@ -16,8 +16,8 @@ var Test = React.createClass({
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
showModal() {
|
||||
this.setState({ visible: true });
|
||||
showModal(e) {
|
||||
this.setState({ visible: true,mousePosition:{x:e.pageX,y:e.pageY} });
|
||||
},
|
||||
handleOk() {
|
||||
this.setState({ loading: true });
|
||||
@ -35,6 +35,7 @@ var Test = React.createClass({
|
||||
</button>
|
||||
<Modal ref="modal"
|
||||
visible={this.state.visible}
|
||||
mousePosition={this.state.mousePosition}
|
||||
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
|
||||
footer={[
|
||||
<button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,
|
||||
|
@ -12,8 +12,7 @@ export default React.createClass({
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
var d = this.refs.d;
|
||||
d.requestClose();
|
||||
this.props.onCancel();
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
@ -54,6 +53,7 @@ export default React.createClass({
|
||||
确 定 {loadingIcon}
|
||||
</button>
|
||||
];
|
||||
return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d" />;
|
||||
return <Dialog transitionName="zoom" onClose={props.onCancel} visible={this.state.visible}
|
||||
maskAnimation="fade" width="500" footer={footer} {...props}/>;
|
||||
}
|
||||
});
|
||||
|
@ -21,6 +21,7 @@
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element | 无 |
|
||||
| mousePosition | 鼠标位置,设置弹窗初始位置 | {x:number,y:number} | 无 |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 500 |
|
||||
|
@ -41,7 +41,7 @@
|
||||
"rc-calendar": "~3.13.0",
|
||||
"rc-checkbox": "~1.1.1",
|
||||
"rc-collapse": "~1.2.3",
|
||||
"rc-dialog": "~4.5.0",
|
||||
"rc-dialog": "~5.0.1",
|
||||
"rc-dropdown": "~1.2.0",
|
||||
"rc-form-validation": "~2.4.7",
|
||||
"rc-input-number": "~2.0.1",
|
||||
|
@ -18,23 +18,19 @@
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user