以上demo，完整案例请下载：example-MyconfirmDialog

或者访问github地址：https://github.com/Kybs0/Kybs0HtmlCssJsDemo/tree/master/definedAlertWindow

自定义动态确认框

假如一个页面有多个业务需要确认框，上面的确认框就显得代码冗余了。

下面提供一个确认框的组件：

1. 定义弹出框的组件

安装动画过渡组件 ReactCSSTransitionGroup  -- yarn add ReactCSSTransitionGroup

ReactCSSTransitionGroup可以在切换界面时，有一个过渡的视觉效果。

在ReactCSSTransitionGroup内部添加弹框内容：提示文本、确认按钮、取消按钮。

创建一个div容器，并将组件添加到容器中。

默认为提示框。如果传入取消按钮的文本，则为确认/取消框。

代码与前端 自定义弹出框-提示框类似：

1 import React, { Component } from 'react';

import { is, fromJS } from 'immutable';

import ReactDOM from 'react-dom';

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import './style.less';

let defaultState = {

alertStatus: false,

alertContent: '确认/提示',

cancelButtonContent: null,

okButtonContent: '确认',

//关闭弹窗，closeType：1-确认，0-取消

closeAlert: function (closeType) { }

};

class AlertComponent extends Component {

state = {

...defaultState,

};

FirstChild = (props) => {

const childrenArray = React.Children.toArray(props.children);

return childrenArray[0] || null;

};

open = (options) => {

options = options || {};

options.alertStatus = true;

this.setState({

...defaultState,

...options,

});

};

// 确认

confirm = () => {

this.setState({

alertStatus: false,

});

this.state.closeAlert(1);

};

// 取消

cancel = () => {

this.state.closeAlert(0);

this.setState({

alertStatus: false,

});

};

shouldComponentUpdate(nextProps, nextState) {

return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));

}

render() {

return (

);

}

}

let div = document.createElement('div');

let props = {};

document.body.appendChild(div);

let AlertBox = ReactDOM.render(React.createElement(AlertComponent, props), div);

export default AlertBox; View Code

2. 添加样式

1 .alert-container {

position : fixed;

top : 0;

left : 0;

width : 100%;

height : 100%;

background: rgba(0, 0, 0, 0.3);

z-index : 11;

}

.alert-container .body {

width : 480px;

background : #fff;

border-radius : 6px;

border : 1px solid #ccc;

text-align : center;

position : absolute;

top : 50%;

left : 50%;

transform : translate(-50%, -50%);

display : flex;

flex-direction: column;

align-items : center;

}

.alert-container .body .content {

align-self : center;

height : 200px;

line-height: 200px;

font-size : 20px;

color : #464646;

width : auto;

}

.alert-container .body .btns {

width : 480px;

height : 60px;

line-height : 61px;

display : flex;

flex-direction : row;

align-items : center;

justify-content: center;

border-width : 1px 0 0 0;

border-color : #EEEEEE;

border-style : solid;

}

.alert-container .body .btns a {

background : inherit;

color : #2CBA5B;

font-size : 20px;

display : inline-block;

cursor : pointer;

text-decoration: none;

width : 240px;

line-height : 60px;

height : 60px;

}

.alert-container .body .btns a.btn-cancel {

color : #666666;

border-width: 0 1px 0 0;

border-color: #EEEEEE;

border-style: solid;

} View Code

3. 提示框调用

直接复制上面的前端代码即可，在本地定义组件。

具体的使用可见下面的案例，删除版本操作时，弹出确认框，确认后执行相关的操作。

确认code为1，取消code为0。

在open函数中，传入提示文本、关闭确认框后的函数。

1 //删除版本

deleteVersion = record => {

const extensionId=this.state.extensionId;

AlertComponent.open({

alertContent: `确认要删除版本${record.version}？`,

cancelButtonContent: '取消',

closeAlert: function (closeType) {

if (closeType == 1) {

ExtensionSingle.deleteVersion({ extensionId: extensionId, version: record.version }).then(result => {

window.location.reload();

});

}

}

});

};

效果图：