0°

React+AntDesign入门:三、AntDesign UI组件-弹出框Modal

三、AntDesign UI组件-弹出框Modal

1.简单的使用下

构想:一个按钮,点击之后弹出一个弹出框,点击取消关闭弹出框。
新增用于展示弹出框的页面UiModal.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
1/**
2 * AntDesign UI 常用弹出框示例
3 */
4import React from 'react'
5import {Button,Card, Modal} from 'antd'
6
7class UiModal extends React.Component{
8  constructor(props){
9    super(props);
10
11    this.state = {
12      modalAddInfoVisible: false, //新增信息Modal的显示属性
13    }
14  }
15
16  //弹出一个弹出框用于新增信息
17  openModalAddInfo = (type)=>{
18    this.setState({modalAddInfoVisible: true})
19  }
20
21  render() {
22    return(
23      <div>
24        <Card title="弹出新增信息页面"> {/*有参数传递必须加()=>*/}
25          <Button type="primary" onClick={()=>this.openModalAddInfo("modalAddInfo")}>新增信息</Button>
26        </Card>
27
28        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮,右上角X号事件*/}
29        <Modal title="新增信息"
30               visible={this.state.modalAddInfoVisible}
31               onCancel={()=>{
32                 this.setState({modalAddInfoVisible: false})
33               }}
34        >
35          <span>姓名:</span><input/>
36        </Modal>
37
38      </div>
39    )
40  }
41
42}
43
44export default UiModal;
45
46

效果:

2.常用方法汇总

效果:
代码:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
1/**
2 * AntDesign UI 常用弹出框示例
3 */
4import React from 'react'
5import {Button,Card, Modal} from 'antd'
6import './ui.less'
7
8class UiModal extends React.Component{
9  constructor(props){
10    super(props);
11
12    this.state = {
13      modalAddInfoVisible: false, //新增信息Modal的显示属性
14      modalDivBtnVisible: false, //自定义下面的按钮Modal的显示属性
15      modalBottomVisible: false, //靠上展示Modal的显示属性
16      modalCenterVisible: false, //水平垂直居中展示Modal的显示属性
17
18    }
19  }
20
21  //设置一个弹出框可见,type为传入的变量,用于标识点了哪个按钮
22  openModalAddInfo = (type)=>{
23    this.setState({[type+"Visible"]: true})
24  }
25
26  //弹出一个信息提示框
27  showInfo = (type)=>{
28    //使用Modal.confirm()弹出一个信息提示框
29    Modal.confirm({
30      title: '确认?',
31      content: '确定提交?',
32      onOk(){
33
34      },
35      onCancel(){
36
37      }
38    })
39  }
40
41  render() {
42    return(
43      <div>
44
45        <Card title="弹出新增信息页面"> {/*有参数传递必须加()=>*/}
46          <Button type="primary" onClick={()=>this.openModalAddInfo("modalAddInfo")}>新增信息</Button>
47          <Button type="primary" onClick={()=>this.openModalAddInfo("modalDivBtn")}>自定义下面的按钮</Button>
48          <Button type="primary" onClick={()=>this.openModalAddInfo("modalBottom")}>靠上展示</Button>
49          <Button type="primary" onClick={()=>this.openModalAddInfo("modalCenter")}>水平垂直居中展示</Button>
50        </Card>
51
52        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮,右上角X号事件*/}
53        <Modal title="新增信息Modal"
54               visible={this.state.modalAddInfoVisible}
55               onCancel={()=>{
56                 this.setState({modalAddInfoVisible: false})
57               }} >
58          <span>姓名:</span><input/>
59        </Modal>
60
61        {/*okText:指定确定按钮的文本  cancelText:指定取消按钮的文本*/}
62        <Modal title="自定义下面的按钮Modal"
63               visible={this.state.modalDivBtnVisible}
64               onCancel={()=>{
65                 this.setState({modalDivBtnVisible: false})
66               }}
67               okText="保存"
68               cancelText="取消" >
69          <span>姓名:</span><input/>
70        </Modal>
71
72        <Modal title="靠上展示Modal"
73               style={{top:20}} //需要在ui.less中添加相关样式
74               visible={this.state.modalBottomVisible}
75               onCancel={()=>{
76                 this.setState({modalBottomVisible: false})
77               }} >
78          <span>姓名:</span><input/>
79        </Modal>
80
81        {/*wrapClassName:指定自定义样式*/}
82        <Modal title="水平垂直居中展示Modal"
83               visible={this.state.modalCenterVisible}
84               wrapClassName="vertical-center-modal"
85               onCancel={()=>{
86                 this.setState({modalCenterVisible: false})
87               }} >
88          <span>姓名:</span><input/>
89        </Modal>
90
91
92        <Card title="弹出信息提示框">
93          <Button type="primary" onClick={()=>this.showInfo("info")}>弹出信息框</Button>
94          <Button type="primary" onClick={()=>this.showInfo("success")}>弹出成功提示框</Button>
95          <Button type="primary" onClick={()=>this.showInfo("error")}>弹出错误信息框</Button>
96          <Button type="primary" onClick={()=>this.showInfo("warning")}>弹出警告信息框</Button>
97          <Button type="primary" onClick={()=>this.showInfo("confirm")}>弹出确认信息框</Button>
98        </Card>
99      </div>
100    )
101  }
102
103}
104
105export default UiModal;
106
107

样式代码less.ui:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1button{ //所有的button的样式
2  margin-right: 10px;
3}
4
5/*
6 用于指定弹出框Modal的位置的样式
7 */
8.vertical-center-modal {
9  text-align: center;
10  white-space: nowrap;
11}
12
13.vertical-center-modal:before {
14  content: '';
15  display: inline-block;
16  height: 100%;
17  vertical-align: middle;
18  width: 0;
19}
20
21.vertical-center-modal .ant-modal {
22  display: inline-block;
23  vertical-align: middle;
24  top: 0;
25  text-align: left;
26}
27
28
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
安全运维