Dialog 一 定位

API

属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ show | 是否显示，可选 | boolean | false getContainer | 获取父容器的方法，可选，如果不传默认是document.body | function | - mask | 是否显示遮罩层，可选 | boolean | false maskClassName | mask的className，可选 | string | - onMaskClick | mask点击事件，可选 | function | - zIndex | style.zIndex，可选 | number | - children | 浮层内容，可选 | React.ReactNode | - & IRcPosition | position相关配置，参考IRcPosition定义 | - | -

IRcPosition 定义

IRcPosition一共分成 16种情况，横纵方向 4 * 4

    export type IRcPositionHorizontal = 'left' | 'center' | 'right' | 'dock';

    export type IRcPositionVertical = 'top' | 'center' | 'bottom' | 'dock';

    interface IRcHorizontal {
        horizontal: IRcPositionHorizontal;
        left?: number;
        right?: number;
    }

    interface IRcVertical {
        vertical: IRcPositionVertical;
        top?: number;
        bottom?: number;
    }

    export type IRcPosition = IRcHorizontal & IRcVertical;

用法

    import React, {useState, useRef} from 'react';
    import {RcDialog} from '../src';
    import {useContainer} from '@co-hooks/util';
    import {Button} from '../../ui';

    export default (props: {}) => {
        const divRef = useRef<HTMLDivElement>(null);

        const [show, setshow] = useState(false);

        const getContainer = useContainer(divRef);

        const maskStyle = {
            background: 'rgba(0, 0, 0, .2)'
        };

        return (
            <div>
                <Button onClick={() => setshow(true)} >指定父级</Button>

                <div className="refDiv" ref={divRef} style={{width: '200px', height: '200px', border: '1px solid #ccc'}}>
                    有内容的div
                </div>

                <RcDialog
                    show={show}
                    getContainer={getContainer}
                    horizontal="center"
                    vertical="center"
                    mask={true}
                    onMaskClick={() => setshow(false)}
                    maskStyle={maskStyle}
                >
                    我是用了指定父级的浮层
                </RcDialog>
            </div>
        );
    };