react实现全局组件确认弹窗
作者：云幻★辰
这篇文章主要为大家详细介绍了react实现全局组件确认弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用
创建全局modal组件
此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。
import ReactDOM from 'react-dom';
import React, { Fragment } from 'react';
import Button from 'components/common/button';
import Icon from 'components/common/icon';
import css from './index.less';
export interface Props {
isCancelIcon?: boolean;
cancelText?: string;
okText?: string;
onCancel?: () => void;
onOk?: () => void;
footer?: React.ReactNode;
style?: object;
}
const Modal: React.FC<Props> = React.memo<Props>(({
isCancelIcon, cancelText, okText, onOk, onCancel, footer, children, style
}) => {
function renderBtn() {
return (
<Fragment>
<Button
className={css.btn}
onClick={() => onCancel()}
>
{cancelText}
</Button>
<Button
className={css.btn}
onClick={() => onOk()}
type="primary">
{okText}
</Button>
</Fragment>
);
}
return (
<div className={css.masker}>
<div className={css.box} style={{ ...style }} >
{isCancelIcon &&
<div
className={css.cancelIconBox}
onClick={() => onCancel()}
>
<Icon className={css.cancelIcon} />
</div>}
{children}
<div className={css.btnBox}>
{footer || renderBtn()}
</div>
</div>
</div>
);
});
Modal.defaultProps = {
okText: '确定',
cancelText: '取消',
onCancel: () => {},
onOk: () => {},
isCancelIcon: true
};
export default function ({ content, props }: { content: React.ReactNode; props: Props }) {
const { onOk=() => {}, onCancel=() => {}, ...others } = props;
/**
* 取消操作，关闭弹窗
*/
function handleClose() {
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
onCancel();
}
/**
* 确认操作，关闭弹窗
*/
function handleOk() {
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
onOk();
}
let div = document.createElement('div');
document.body.appendChild(div);
ReactDOM.render(
<Modal
{...others}
onOk={handleOk}
onCancel={handleClose}
>
{content}
</Modal>,
div);
return {
handleOk: () => handleOk(),
handleClose: () => handleClose()
};
}less文件
@import '~common/less/index.less';
.masker{
width: 100vw;
height: 100vh;
background: @mask-color;
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
.box{
width: 500px;
height: 230px;
position: relative;
background-color: white;
position: relative;
transition: .2s;
animation: showModal .2s ease-in forwards;
.cancelIconBox{
width: 27px;
height: 27px;
line-height: 27px;
text-align: center;
position: absolute;
right: 15px;
top: 22px;
cursor: pointer;
.cancelIcon{
.font(17px)
}
}
.btnBox{
width: 100%;
position: absolute;
left: 0;
bottom: 20px;
padding-right: 10px;
display: flex;
flex-flow: row;
justify-content: flex-end;
align-items: center;
.btn{
margin-right: 10px;
.font(12px)
}
}
}
}
@keyframes showModal {
0%{
transform:translate(-100px, 60px) scale(.5) ;
}
100%{
transform:translate(0, 0) scale(1) ;
}
}确认框内容组件
此组件用以渲染确认框具体内容，项目中可根据具体情况渲染自己需要的内容
tsx文件
import React from 'react';
import classNames from 'classnames';
import Icon from 'components/common/icon';
import modal, { Props as ModalProps } from '../components/modal';
import css from './index.less';
interface Content {
key: string;
value: string;
}
export interface Props extends ModalProps {
title?: string;
content?: Content[];
}
export default function success({ title, content, ...others }: Props) {
const node = (
<div className={css.successWrap}>
<div className={css.line} />
<div className={css.content}>
<Icon className={css.successIcon} />
<div className={css.right}>
<span className={css.successTitle}>{title}</span>
{
content && content.map((item, index) => {
return (
<div key={`content_${index}`} className={css.contentList}>
<div className={css.key}>{item.key}：</div>
<span>{item.value}</span>
</div>
);
})
}
</div>
</div>
</div>
);
modal({
content: node,
props: others
});
}less文件
@import '~common/less/index.less';
.successWrap{
.line{
width: 100%;
height: 8px;
background-color: #6EA204;
}
.content{
display: flex;
flex-flow: row;
margin: 30px 0 0 40px;
.successIcon{
.font(72px);
}
.right{
display: flex;
flex-flow: column;
padding-top: 10px;
margin-left: 20px;
.successTitle{
.contentList();
.font(18px);
font-weight:500;
}
.contentList{
display: flex;
flex-flow: row;
.font(12px);
font-weight:400;
color:@font-title-color;
margin-bottom: 7px;
.key{
min-width: 72px;
}
}
}
}
}使用全局确认框
只需要在组件中引入全局组件，然后直接调用全局组件中的方法即可。
import React from 'react';
import success from 'components/common/confirm/success';
const content = [
{
key: '代理商姓名',
value: '东东东'
},
{
key: '联系方式',
value: '18978765678'
},
{
key: '代理商账号',
value: '这是一个测试登录用户名'
},
{
key: '初始密码',
value: '这是一个测试登录用户名'
},
];
export interface Props {}
const Components: React.FC<Props> = () => {
return (
<Button onClick={() => success({
content, title: '代理商录入成功',
okText: '继续录入',
cancelText: '返回列表'
})}
>成功状态框</Button>
)
Components.defaultProps = {};
export default Components实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。