点击按钮展示弹窗或者起泡卡

68 阅读1分钟

 const handleClose = () => {
        console.log('关闭弹窗')
        // setTime(["", ""])
        setDimension('')
        setIsOpen(false)
    }
    const openDateDialog = () => {
        setIsOpen(true)
    }
    
     const handleClose = () => {
        console.log('关闭弹窗')
        // setTime(["", ""])
        setDimension('')
        setIsOpen(false)
    }
    //选择日期的时间关闭按钮
    const closeX = () => {
        runContract({
            time: ''
        })
        setTime('')
        setFlagTime(true)
    }

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }} onMouseEnter={() => setIsHovered(true)}
                                        onMouseLeave={() => setIsHovered(false)}>
                                        <div className="desktop_contract_rate_time" onClick={openDateDialog} style={{display:'none'}}>
                                            {
                                                flagTime ? (<div>
                                                    <span >选择日期</span>
                                                    <span style={{ marginLeft: '70px' }}>
                                                        <InsertRowAboveOutlined />
                                                    </span>

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

                                        <div className="desktop_contract_rate_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', marginLeft: '1px', }}>
                                            {
                                                flagTime ? (<div ></div>) : (isHovered ? (<Tooltip title="清除时间"><CloseCircleOutlined onClick={closeX} style={{ fontSize: '14px', color: '#cccccc', cursor: 'pointer' }} /></Tooltip>) : (<></>))
                                            }
                                        </div>
                                    </div>
                                    
                                    
                                    
                                     <div>
                <DateModal isOpen={isOpen} onclose={handleClose} onhandleTime={handleTime} />
            </div>