@beisen-cmps/target-pop

TargetPop 使用说明

根据点击的元素位置弹层，弹层依据点击元素居中显示，上方显示，下方显示，弹层只能在点击元素的左侧显示。

项目运行

• npm install 安装依赖
• npm run examples 项目运行
• npm run lib 项目打包

参数

• target 点击的元素（event.target）
• children 弹层中的节点

示例

    import React from 'react';
    import TargetPop from '../../src';

    export default class TargetPopComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                target: null
            };
        }
        onClick = (e) => {
            this.setState({
                target: e.target
            });
        };
        onClose = () => {
            this.setState({
                target: null
            });
        };
        render() {
            return (
                <div>
                    <div style={{ margin: '300px 0px 0px 400px' }} onClick={this.onClick}>
                        新建
                    </div>
                    <div style={{ margin: '300px 0px 0px 400px' }} onClick={this.onClose}>
                        关闭
                    </div>
                    {this.state.target ? (
                        <TargetPop target={this.state.target}>
                            <div style={{ width: '300px', height: '400px' }}>111111</div>
                        </TargetPop>
                    ) : (
                        ''
                    )}
                </div>
            );
        }
    }