yh-react-popover

popover 气泡弹窗组件

预览地址：https://yehuozhili.github.io/yh-react-popover/

简介

• 由于我在开发 h5dooring 时发现 antd 的 popover 会闪烁位移，而且给定宽高也不能解决此问题，所以直接自己实现个 popover。最终成功替换了 antd 的 popover 解决了此问题。

• 目前写的这个 popover 只支持 click，有别的需要以后再说。

快速上手

• 需求 react 与 react-dom 大于 16.8 即可

npm i  yh-react-popover

• 只需要传 content 为弹窗内容即可工作,direction 默认为 top

• popover 包裹元素不需要绑事件。

import Popover from 'yh-react-popover'

<Popover directions="TR" content={<div>TRcontent</div>}>
	<button>TR</button>
</Popover>

api

export interface PopoverProps {
	//这个是弹窗内容
	content: ReactNode;
	//这个是方向 默认top
	directions: PopDirections;
	//回调强制刷新函数，用来重新计算位置
	callback?: (v: Function) => void;
	//用来回调关闭函数，如果content中有需要点击关闭的，使用此回调参数
	closeFuncCallback?: Function;
	//触发元素的壳的样式
	constDomStyle?: CSSProperties;
	//弹窗元素的壳的样式
	modalDomStyle?: CSSProperties;
	//小三角的元素样式
	triangleDomStyle?: CSSProperties;
	//弹窗内层壳的样式，一般不用改
	innerDomStyle?: CSSProperties;
	//触发元素内层壳的样式，一般不用改
	innerConstDomStyle?: CSSProperties;
	//modal的ref回调,一般用于绑定事件
	modalRefCallback?: (v: RefObject<HTMLDivElement>) => void;
	//要modal外关闭元素则true，否则false,default true
	needOutsideClose?: boolean;
}

• 里面绑定的 div 是 inline-block，想修改样式只要用 innerConstDomStyle 与 constDomStyle 把 display 改为 block 即可。

• callback 的强制刷新可以用 useState 存起来，在监听事件比如 scroll 中进行调用。