前端 自定义确认提示框（二）

上一篇有自定义提示框，前端 自定义弹出框-提示框（一），这篇推荐一个确认框的实现。

JS默认确认框

确认框 var result=confirm('确认删除XX文件？');result为bool类型

回复确认框 var result=prompt('请输入文件标题：');result返回输入的值

自定义确认框

下文提供一个自定义提示框的案例，通过另一种方案（样式设置）来实现：

1   <div class="confirmWindow" id="confirmwindow">
2     <div class="body">
3       <div class="content">确认要删除XX文件么？</div>
4       <div class="btns">
5         <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick="cancelOnClick()">取消</a>
6         <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick="okOnClick()">确认</a>
7       </div>
8     </div>
9   </div>

通过js设置元素的display属性，来控制提示框的显示隐藏

  document.getElementById("confirmwindow").style.display = "inline";

  document.getElementById("confirmwindow").style.display = "none";
效果如下：

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

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

自定义动态确认框

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

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

1. 定义弹出框的组件

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

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

• 在ReactCSSTransitionGroup内部添加弹框内容：提示文本、确认按钮、取消按钮。
• 创建一个div容器，并将组件添加到容器中。
• 默认为提示框。如果传入取消按钮的文本，则为确认/取消框。

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

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 (
      <ReactCSSTransitionGroup component={this.FirstChild} transitionName="hide" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
        <div className="alert-container" style={this.state.alertStatus ? { display: 'block' } : { display: 'none' }}>
          <div className="body">
            <div className="content">{this.state.alertContent}</div>
            <div class="btns">
              <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick={this.cancel}
                 style={this.state.cancelButtonContent==null||this.state.cancelButtonContent=='' ? { display: 'none' } : { display: 'block' }}>
                {this.state.cancelButtonContent}
              </a>
              <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick={this.confirm}>
                {this.state.okButtonContent}
              </a>
            </div>
          </div>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}

let div = document.createElement('div');
let props = {};
document.body.appendChild(div);

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

export default AlertBox;

2. 添加样式

.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;
}

3. 提示框调用

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

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

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

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

  //删除版本
  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();
          });
        }
      }
    });  
  };

效果图：