实现三个下拉框的功能（Day：47）

任务：实现三个下拉框的功能

进度：已完成

1、在原来的基础上修改，首先是采用Popover（气泡卡片）实现下拉的效果

 return _.map(rectangles, (rectangle, index) => (
            <Popover
                key={index}
                arrow={false}    //箭头的隐藏与打开
                content={rectangle.content}        //显示对应矩形的内容
                placement="bottomLeft"         //显示位置在坐下方
                // 这个是让他点击才显示
                trigger="click"      //只有点击时，才会显示Popover
                open={visiblePopover === index}
                onOpenChange={(visible) => handlePopover(index, visible)}
                style={{ whiteSpace: 'nowrap', }}
            >
                <Button
                    className={`rectangle ${expand === index ? 'expanded' : ''}`}
                    onClick={() => toggle(index)}
                    onFocus={() => setExpand(index)}  // 处理焦点时的状态变化
                    key={index}
                >
                    <div style={{ marginRight: 8, marginLeft: 8 }} >{rectangle.icon}</div>
                    <div className='rectangle-text'>{rectangle.text}</div>
                    <CaretDownOutlined style={{ fontSize: 8, marginLeft: 8, marginRight: 8, transform: `rotate(${expand === index ? 0 : 180}deg)` }} />
                </Button>
            </Popover>
        ))
    }

这个是我的rectangles的return 里面有加了Popover的组件需注意 注释部分

控制Popover的状态，默认不显示


        const [visiblePopover, setVisiblePopover] = useState(null)
        const handlePopover = (index, visible) => {
            if (visible) {
                setVisiblePopover(index)
            } else {
                setVisiblePopover(null)
            }
        }

这部分实现了Pop的是否可见 visible是一个属性

  open={visiblePopover === index}
                onOpenChange={(visible) => handlePopover(index, visible)}

这里就是根据条件判断是否打开Popover了

2、实现第一个下拉框

由于之前已经把rectangles的数据整合到了数组中，所以我这次直接在数组中操作

 icon: <ToolOutlined />, text: '工具', content: (
                    <div style={{ marginLeft: 30, marginRight: 30 }}>
                        <div className='rectangle-font' style={{ marginBottom: 5 }}>
                            搜素工具
                        </div>
                        <Input placeholder="开始键入以查看列表" style={{ width: 370 }} />
                        <div className='rectangle-font' style={{ marginTop: 30 }}>
                            热门工具
                        </div>
                        <div className='font-padding'>
                            Adobe Photoshop
                        </div>
                        <div className='font-padding'>
                            Adobe Illustrator
                        </div>
                        <div className='font-padding'>
                            Adobe InDesign
                        </div>
                        <div className='font-padding'>
                            Adobe After Effect
                        </div>
                        <div className='font-padding'>
                            Adobe Photoshop Lightroom
                        </div>
                    </div >)
            },

对应的css

.rectangle-font {
  font-size: 10px;
  margin-top: 15px;
}

.font-padding {
  margin-top: 5px;
  font-size: 13px;
}

.font-padding:hover {
  color: #005cff;

}

这部分没有什么难度

3、第二个下拉框

颜色选择器我找了一个react-color的库

import { SwatchesPicker } from 'react-color';

实现部分：

 //颜色选择器
        const ColorPickerComponent = () => {
            const [selectedColor, setSelectedColor] = useState('#ffffff');
            const handleColorChange = (color) => {
                setSelectedColor(color.hex);
            };
            return (
                <div>
                    <SwatchesPicker
                        color={selectedColor}
                        onChange={handleColorChange}
                    />
                </div>
            );
        };

数组中

  {
                icon: <RadarChartOutlined />, text: '颜色', content: (
                    <>
                        <ColorPickerComponent />
                    </>
                )
            },

4、第三个下拉框

这部分比较麻烦，涉及到与前面的部分相连

4.1 首先是大致布局

 {
                icon: <HomeOutlined />, text: '位置', content: (
                    <>
                        <div className='input-local' >
                            <div className='input-state'>
                                国家/地区
                            </div>
                            <div>
                                {/* <LocationComponent /> */}
                                <Select
                                    showSearch
                                    style={{
                                        width: 180,
                                    }}
                                    placeholder="选择国家/地区"
                                    options={options}
                                    onChange={handleChangeCountry} 
                                    value={selectedCountry}
                                />
                            </div>
                        </div>
                        <div className='input-local' style={{marginTop:10}}>
                            <div className='input-citys'>
                                城市
                            </div >
                            <div>
                                <Input disabled={!selectedCountry} />
                            </div>
                        </div>
                        <Divider />
                        <div style={{marginLeft:10}} >
                            <Button type="text" >取消</Button>
                            {/* 清除按钮 */}
                            {selectedCountry && (
                                <Button type="text" onClick={handleClear}>
                                    清除筛选条件
                                </Button>
                            )}
                            <Button type="primary" shape="round" >应用筛选器</Button>       
                        </div>
                    </>
                )
            },

4.2对应的css

.input-local {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
  margin-right: 30px;

}
.input-state{
  font-size: 12px;
  font-weight: bold;
  margin-right: 60px;

}
.input-citys{
  font-size: 12px;
    font-weight: bold;
    margin-right: 87px;
}

4.3 由于有一个功能是要在下拉框初始状态第二个输入框禁用，选择国家以后要你选择以后解除掉

所以设置一个状态

  //选择框禁止
        const [selectedCountry, setSelectedCountry] = useState(null);
        const handleChangeCountry = (value) => {
            // 更新选中的国家
            setSelectedCountry(value);
        };

       <Input disabled={!selectedCountry} />

4.4 功能：选择国家以后会出现一个清除按钮，点击清除，下拉框收回，

首先设置一个方法


      const handleClear = () => {
            setSelectedCountry(null); // 清除已选择的国家
            setVisiblePopover(null); // 关闭 Popover
        };

然后添加一个Button去调用

  <div style={{marginLeft:10}} >
                            <Button type="text" >取消</Button>
                            {/* 清除按钮 */}
                            {selectedCountry && (
                                <Button type="text" onClick={handleClear}>
                                    清除筛选条件
                                </Button>
                            )}
                            <Button type="primary" shape="round" >应用筛选器</Button>       
                        </div>

最后就实现了这部分的功能

然后有两个小bug 1、箭头问题 2、要求下拉框展开时动画保持

XJQ124 / Some-notes

实现三个下拉框的功能（Day：47） #50