ReactAntd(十) ANTD-Modal

React-Antd-modal 总结

本节主要是两个一个是 modal,另外一个是 confirm

首先引入组件

import { Card, Button, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'

消息提示框使用的最多的属性,普通版

• title 标题

• visible 显示不显示

• onOk 点击确认回调函数

• onCancle 点击取消回调函数

• maskClosable 点击遮罩是否退出

<Modal
  title="基础模态框"
  visible={this.state.visibleBasic}
  onOk={this.handleOk_1}
  onCancel={this.handleCancel_1}
  maskClosable={this.state.maskClosable}
>
  <p>最基础的内容</p>
</Modal>

距离顶部 20PX Modal

• 增加了 top 20px 属性

<Modal
  title="距离顶部20PX"
  style={{ top: 20 }}
  visible={this.state.visiblemodalTop20}
  maskClosable={this.state.maskClosable}
  onOk={this.handleOk_3}
  onCancel={this.handleCancel_3}
>
  <p>距离顶部20PX</p>
</Modal>

垂直居中

• centered

<Modal
  title="垂直居中"
  centered
  visible={this.state.visiblecenter}
  maskClosable={this.state.maskClosable}
  onOk={this.handleOk_4}
  onCancel={this.handleCancel_4}
>
  <p>垂直居中弹框</p>
</Modal>

信息确认框

信息确认框属性和上面的弹出层属性差不多

• 回调函数必须用箭头函数

Modal.confirm({
  title: '确认框',
  icon: <ExclamationCircleOutlined />,
  content: '这就是提示内容',
  okText: '确认',
  cancelText: '取消',
  onOk: () => {
    this.handle_confim_ok_1()
  },
  onCancel: () => {
    this.handle_confim_cancle_1()
  },
})