前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
完成弹框提示model.js
import './ComfirmModal.css'; import Card from "../Card/Card"; import BackDrop from "../BackDrop/BackDrop"; const ConfirmModal = props => { return <BackDrop> <Card className="confirmModal"> <div className="confirmText"> <p>{props.confirmText}</p> </div> <div className="confirmButton"> <button onClick={props.onOk} className="okButton">确认</button> <button onClick={props.onCancel}>取消</button> </div> </Card>; </BackDrop> }; export default ConfirmModal;
model.css
.confirmModal{ display: flex; flex-flow: column; width: 400px; height: 200px; padding: 10px; background-color: #fff; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .confirmText{ display: flex; height: 150px; justify-content: center; align-items: center; font-size: 22px; color: #D62828; } .confirmButton{ flex: auto; display: flex; justify-content: flex-end; } .confirmButton button{ width: 80px; margin: 0 10px; border: none; background-color: #EAE2B7; font-weight: bold; font-size: 18px; } .confirmButton .okButton{ background-color: #D62828; color: white; }
父组件
{showConfirm && <ConfirmModal confirmText="该操作不可恢复！请确认" onCancel={cancelHandler} onOk={okHandler} />}
