pop起泡卡移入 显示和隐藏

52 阅读1分钟

`` 注意: 点击时间移入 移出。 尽量pop的content 不要用antdesign图表。 否则图表不停的重绘

移入移出 onMouseEnter 和 onMouseLeave


    const [isHovered, setIsHovered] = useState(false); // 是否展示时间的关闭按钮
    
    
 <div style={{ display: 'flex', alignItems: 'center' }} onMouseEnter={() => setIsHovered(true)}
                                                    onMouseLeave={() => setIsHovered(false)}  >
                                              
                                                    <div className="desktop_event_time">
                                                        <Popover   placement="bottomRight"  
                                                        content={<DatePop onhandleTime={handleTime} onclose={hideOpen} />} 
                                                        title="选择时间" trigger="click" open={open}
                                                            onOpenChange={handleOpenChange}>
                                                            {
                                                                flagTime ? (<div>
                                                                    <span >选择日期</span>
                                                                    <span style={{ marginLeft: '70px' }}>
                                                                        <InsertRowAboveOutlined />
                                                                    </span>

                                                                </div>) : (
                                                                    <span className="showTime" style={{ color: '#000000D9' }}
                                                                    >时间:{showTime[0]} 至 {showTime[1]}</span>
                                                                )
                                                            }
                                                        </Popover>

                                                    </div>
                                                    <div style={{ display: 'inline-block' }}>
                                                        {

                                                            flagTime ? (<div style={{ display: 'inline-block' }}></div>) : (isHovered ? (<Tooltip title="清除时间"><CloseCircleOutlined onClick={closeX} style={{ display: 'inline-block', marginLeft: '5px', fontSize: '14px', color: '#cccccc', cursor: 'pointer' }} /></Tooltip>) : (<></>))

                                                        }
                                                    </div>
                                                </div>