释放双眼,带上耳机,听听看~!
三、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