mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 03:29:59 +08:00
Add confirmLoading prop for Modal
You can use `confirmLoading` to cancel button loading status. ``` onOk() { ... this.setState({ confirmLoading: false }); } ``` Fix #322
This commit is contained in:
parent
a6eb7413f4
commit
c5cab1d687
@ -23,6 +23,7 @@ var Test = React.createClass({
|
||||
handleOk() {
|
||||
console.log('点击了确定');
|
||||
this.setState({
|
||||
confirmLoading: false,
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
@ -36,6 +37,7 @@ var Test = React.createClass({
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
|
||||
<Modal title="第一个 Modal"
|
||||
visible={this.state.visible}
|
||||
confirmLoading={this.state.confirmLoading}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}>
|
||||
<p>对话框的内容</p>
|
||||
|
@ -40,16 +40,18 @@ let AntModal = React.createClass({
|
||||
},
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let newState = {};
|
||||
if ('visible' in nextProps) {
|
||||
let newState = {
|
||||
visible: nextProps.visible
|
||||
};
|
||||
// 隐藏后去除按钮 loading 效果
|
||||
newState.visible = nextProps.visible;
|
||||
// 隐藏后默认去除按钮 loading 效果
|
||||
if (!nextProps.visible) {
|
||||
newState.confirmLoading = false;
|
||||
}
|
||||
this.setState(newState);
|
||||
}
|
||||
if ('confirmLoading' in nextProps) {
|
||||
newState.confirmLoading = nextProps.confirmLoading;
|
||||
}
|
||||
this.setState(newState);
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -20,9 +20,10 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| visible | 对话框是否可见 | Boolean | 无 |
|
||||
| confirmLoading | 确定按钮 loading | Boolean | 无 |
|
||||
| title | 标题 | React.Element | 无 |
|
||||
| mousePosition | 鼠标位置,设置弹窗初始位置 | {x:number,y:number} | 无 |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 520 |
|
||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||
|
@ -42,20 +42,26 @@
|
||||
.btn-circle-outline;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-family: anticon;
|
||||
content: "\e610";
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
&-loading {
|
||||
padding-right: 31px;
|
||||
pointer-events: none;
|
||||
opacity: 0.75;
|
||||
&:after {
|
||||
font-family: anticon;
|
||||
.animation(loadingCircle 1s infinite linear);
|
||||
content: "\e610";
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
right: 13px;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user