本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习,共同进步
效果展示
测试组件
class Test extends Component {
constructor(props) {
super(props)
this.state = {
modalVisible: false
}
}
render() {
return (
<Modal visible={this.state.modalVisible} onCancel={() => {
console.log("modal close")
this.setState(
{
modalVisible: false
}
)
}} onConfirm={() => {
console.log("点击了确定按钮")
}}>
<div className="modal-body">
<div className="row">
<div className="left"><span className="label">预约数量:</span><span className="value">2</span></div>
<div className="right"><span className="label">总金额为:</span><span className="value">¥200</span></div>
</div>
<div className="row">
<div className="left"><span className="label">余额抵扣:</span><span className="value">¥0</span></div>
<div className="right"><span className="label">应付余额:</span><span className="value">¥200</span></div>
</div>
</div>
</Modal>
)
}
}
export default Test;
Modal.jsx
import React, { Component } from 'react';
import "./modal.scss"
class Modal extends Component {
render() {
return this.props.visible?(
<div className="modal-mask">
<div className="modal-wrap">
<div className="header">
<div className="title">确认付款</div>
</div>
<div className="body">
{this.props.children}
</div>
<div className="footer">
<div className="cancel" onClick={this.props.onCancel.bind(this)}>取消</div>
<div className="confirm" onClick={this.props.onConfirm.bind(this)}>确定</div>
</div>
</div>
</div>
):(<span></span>)
}
}
export default Modal;
modal.scss
.modal-mask{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
.modal-wrap{
z-index: 99;
height: 265px;
width: 86%;
margin-left: 6%;
margin-top: 120px;
background: url("../../../assets/img/modalHeader.png") no-repeat ;
background-size:100% 100%;
animation:slideDown .3s;
.header{
height:104px;
.title{
padding-top: 20px;
color: #ffffff;
font-size: 22px;
}
}
.body{
height: 115px;
}
.footer{
height: 46px;
.cancel{
display: inline-block;
height: 46px;
line-height: 46px;
width: 50%;
font-size: 15px;
color: #c1c4c9;
border-radius: 0 0 0 15px;
&:active{
background: rgb(221,221,221)
}
}
.confirm{
display: inline-block;
height: 46px;
line-height: 46px;
width: 50%;
font-size: 15px;
color: #1eb94a;
border-radius: 0 0 15px 0;
&:active{
background: rgb(221,221,221)
}
}
}
}
}
@keyframes slideDown
{
from {margin-top:0px;}
to {margin-top:120px;}
}