React confim popup components 弹出确认框组件的实现
程序员文章站
2022-05-31 13:29:38
...
先来张效果图:
1.Components
// components import React from 'react'; import { Link } from 'react-router'; class ConfirmWins extends React.Component { constructor() { super(); } render() { const props = this.props; return ( <div className="confirm-wins-container"> <div className="wins"> <div className="title text-center">{props.title}</div> <div className="desc gray-text96">{props.desc}</div> <div className="fn-btn text-center"> {props.leftBtn?<span className="btn left-btn" onClick={props.onLeftClick}>{props.leftBtn.text}</span>:''} <span className="btn right-btn" onClick={props.onRightClick}>{props.rightBtn.text}</span> </div> </div> </div> ); } } ConfirmWins.propTypes = { title: React.PropTypes.string.isRequired, desc: React.PropTypes.string.isRequired, leftBtn: React.PropTypes.object, rightBtn: React.PropTypes.object.isRequired, onLeftClick: React.PropTypes.func, onRightClick: React.PropTypes.func.isRequired, }; export default ConfirmWins;
2. Stylus css
@import '../util/constant' .confirm-wins-container position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 30; background: rgba(0, 0, 0, 0.5); .wins position: absolute; margin-top: 50%; background: $bgColor; width: 80%; margin-left: 10%; padding: 1em; border-radius 4px .title font-size: 16px; margin: .5em; .fn-btn margin-top 1em .btn display: inline-block; border: 1px solid $brandMainColor; height: 3em; width: 8em; line-height: 3em; border-radius 4px .left-btn float: left; color $brandMainColor .right-btn float: right; border: 1px solid $brandMainColor; background $brandMainColor color #fff
3.应用
const addressConfirm = {
title: '很抱歉',
desc: '您还没有设置收货地址,请设置您的收货地址',
leftBtn: {
text: '确认'
},
rightBtn: {
text: '设置地址'
}
};
{state.isShowAddressPopUp?<ConfirmWins {...addressConfirm} onLeftClick={this.closePopUp.bind(this, 'isShowAddressPopUp')} onRightClick={this.goLink.bind(this, '#/address/add')} />:''}
写在最后,关于更多React Components请访问:
上一篇: Layui下拉列表框动态赋值
下一篇: 生气会造成哪些伤害 对身体有何影响