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();