版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29668759/article/details/88746257
三、AntDesign UI组件-弹出框Modal
1.简单的使用下
构想:一个按钮,点击之后弹出一个弹出框,点击取消关闭弹出框。
新增用于展示弹出框的页面UiModal.js
/**
* AntDesign UI 常用弹出框示例
*/
import React from 'react'
import {Button,Card, Modal} from 'antd'
class UiModal extends React.Component{
constructor(props){
super(props);
this.state = {
modalAddInfoVisible: false, //新增信息Modal的显示属性
}
}
//弹出一个弹出框用于新增信息
openModalAddInfo = (type)=>{
this.setState({modalAddInfoVisible: true})
}
render() {
return(
<div>
<Card title="弹出新增信息页面"> {/*有参数传递必须加()=>*/}
<Button type="primary" onClick={()=>this.openModalAddInfo("modalAddInfo")}>新增信息</Button>
</Card>
{/*title:弹出框标题 visible:是否可见 onCancel:取消按钮,右上角X号事件*/}
<Modal title="新增信息"
visible={this.state.modalAddInfoVisible}
onCancel={()=>{
this.setState({modalAddInfoVisible: false})
}}
>
<span>姓名:</span><input/>
</Modal>
</div>
)
}
}
export default UiModal;
效果:
2.常用方法汇总
效果:
代码:
/**
* AntDesign UI 常用弹出框示例
*/
import React from 'react'
import {Button,Card, Modal} from 'antd'
import './ui.less'
class UiModal extends React.Component{
constructor(props){
super(props);
this.state = {
modalAddInfoVisible: false, //新增信息Modal的显示属性
modalDivBtnVisible: false, //自定义下面的按钮Modal的显示属性
modalBottomVisible: false, //靠上展示Modal的显示属性
modalCenterVisible: false, //水平垂直居中展示Modal的显示属性
}
}
//设置一个弹出框可见,type为传入的变量,用于标识点了哪个按钮
openModalAddInfo = (type)=>{
this.setState({[type+"Visible"]: true})
}
//弹出一个信息提示框
showInfo = (type)=>{
//使用Modal.confirm()弹出一个信息提示框
Modal.confirm({
title: '确认?',
content: '确定提交?',
onOk(){
},
onCancel(){
}
})
}
render() {
return(
<div>
<Card title="弹出新增信息页面"> {/*有参数传递必须加()=>*/}
<Button type="primary" onClick={()=>this.openModalAddInfo("modalAddInfo")}>新增信息</Button>
<Button type="primary" onClick={()=>this.openModalAddInfo("modalDivBtn")}>自定义下面的按钮</Button>
<Button type="primary" onClick={()=>this.openModalAddInfo("modalBottom")}>靠上展示</Button>
<Button type="primary" onClick={()=>this.openModalAddInfo("modalCenter")}>水平垂直居中展示</Button>
</Card>
{/*title:弹出框标题 visible:是否可见 onCancel:取消按钮,右上角X号事件*/}
<Modal title="新增信息Modal"
visible={this.state.modalAddInfoVisible}
onCancel={()=>{
this.setState({modalAddInfoVisible: false})
}} >
<span>姓名:</span><input/>
</Modal>
{/*okText:指定确定按钮的文本 cancelText:指定取消按钮的文本*/}
<Modal title="自定义下面的按钮Modal"
visible={this.state.modalDivBtnVisible}
onCancel={()=>{
this.setState({modalDivBtnVisible: false})
}}
okText="保存"
cancelText="取消" >
<span>姓名:</span><input/>
</Modal>
<Modal title="靠上展示Modal"
style={{top:20}} //需要在ui.less中添加相关样式
visible={this.state.modalBottomVisible}
onCancel={()=>{
this.setState({modalBottomVisible: false})
}} >
<span>姓名:</span><input/>
</Modal>
{/*wrapClassName:指定自定义样式*/}
<Modal title="水平垂直居中展示Modal"
visible={this.state.modalCenterVisible}
wrapClassName="vertical-center-modal"
onCancel={()=>{
this.setState({modalCenterVisible: false})
}} >
<span>姓名:</span><input/>
</Modal>
<Card title="弹出信息提示框">
<Button type="primary" onClick={()=>this.showInfo("info")}>弹出信息框</Button>
<Button type="primary" onClick={()=>this.showInfo("success")}>弹出成功提示框</Button>
<Button type="primary" onClick={()=>this.showInfo("error")}>弹出错误信息框</Button>
<Button type="primary" onClick={()=>this.showInfo("warning")}>弹出警告信息框</Button>
<Button type="primary" onClick={()=>this.showInfo("confirm")}>弹出确认信息框</Button>
</Card>
</div>
)
}
}
export default UiModal;
样式代码less.ui:
button{ //所有的button的样式
margin-right: 10px;
}
/*
用于指定弹出框Modal的位置的样式
*/
.vertical-center-modal {
text-align: center;
white-space: nowrap;
}
.vertical-center-modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.vertical-center-modal .ant-modal {
display: inline-block;
vertical-align: middle;
top: 0;
text-align: left;
}