@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>
			);
		}
	}