2.0.0 • Published 1 year ago
@charyliu/react-popup v2.0.0
react-popup
包说明
此包提供了一个通用弹窗组件(React)
Install
npm install @charyliu/react-popup
Usage
import { Popup, showPop, hidePop } from '@charyliu/react-popup'
Popup组件详情
Popup.props
属性 | 类型 | 必填 | 默认 | 描述 |
---|---|---|---|---|
desWidth | string | false | '375px' | 设计宽度 |
desheight | string | false | '812px' | 设计高度 |
showPop
/** 弹窗配置 */
interface PopOptions {
/** 弹窗是否居中显示,默认true */
isCenter?: boolean;
/** 弹窗黑色蒙层透明度, 默认0.7 */
maskOpacity?: number;
/** 弹窗层级,默认0 */
zIndex?: number;
/** 点击弹窗空处是否关闭弹窗,默认false */
isClickBlankHide?: boolean;
/** 点击弹窗空处回调 */
onClickBlank?: Function;
/** 自定义弹窗动画类名 */
aniClassName?: string;
/** 弹窗空处是否点击穿透, 默认false */
isBlankClickThrough?: boolean;
/** 自定义传入参数,会注入到弹出组件的props */
[keyName: string]: any;
}
/**
* 展示弹窗
* @param popComp 弹窗组件
* @param options 弹窗配置
* @returns 弹窗id
*/
declare const showPop: (popComp: React.ComponentClass | React.FunctionComponent, options?: PopOptions) => string;
hidePop
/**
* 隐藏弹窗
* @param options 弹窗关闭配置
*/
declare function hidePop(options?: {
/** 关闭全部 */
isHideAll?: boolean;
/** 要隐藏的弹窗的id,未传默认隐藏最上层弹窗 */
id?: string;
/** 隐藏动画类名 */
aniClassName?: string;
/** 隐藏动画持续时间(ms),默认0 */
aniTime?: number;
}): void;
使用示范
/* app.jsx */
import { Popup } from '@charyliu/react-popup'
import Index from 'index.jsx'
function APP() {
return (
<>
<Popup desHeight='1624rem' desWidth='750rem' />
<Index />
</>
)
}
/* index.jsx */
import { showPop, hidePop } from '@charyliu/react-popup'
import Rank from 'rank.jsx'
// 打开排行榜弹窗
const popId = showPop(Rank);
// 隐藏排行榜弹窗
hidePop();