ant-design-pro 顶部检索框展开收缩时，菜单栏的自动收起放开效果实现调查记录 2021-12-02

调查对象

• 搜索栏未打开状态
  
• 搜索栏打开状态
  

情况分析

• 在点击检索图标时，输入框会展开，左侧菜单会自动收起。
• 再次点击检索图标时，输入框会收起，左侧菜单会自动展开。
  理论上组件之间应当解耦，所以实现上大概率不会使用组件之间互相调用的方式实现。
  因此，进行了此项调查。

线索链

#ant-design-pro源码
#代码获取方案（花费时间比较长）：https://blog.csdn.net/ren365880/article/details/108967683

• 检索组件“HeaderSearch”在组件“RightContent”中被引用
  

• 组件“RightContent”在项目入口“app.tsx”中被引用，注释指向ant-design-pro的ProLayout组件
  

• ProLayout 组件的确有此属性，并且其菜单属性的配置指向了https://ant.design/components/menu-cn/
  

• 链接指向的内容是ant-design框架的menu组件，也就是说目标代码极有可能在这个组件里实现的。
  
  #ant-design源码
  #地址：https://gitee.com/ant-design/ant-design?_from=gitee_search

• 组件“a-menu”使用了其他库里的组件，组件名是“rc-menu”
  

• 组件“rc-menu”出自“react-component”的一个组件集合
  
  #rc-menu源码
  #地址：https://gitee.com/mirrors_react-component/menu?_from=gitee_search

• 调查发现“rc-menu”中使用了“rc-overflow”实现了一些功能
  
  

8. 查看“rc-overflow”官网发现例子中的确有目标效果的demo

• 内容输入前
  
• 内容输入后（后面的那串数字是输入框）
  

#rc-overflow源码
#地址：https://gitee.com/mirrors_react-component/overflow
9. 组件“rc-overflow”使用组件“rc-resize-observer”实现


#rc-resize-observer源码
#地址：https://gitee.com/mirrors_react-component/resize-observer?_from=gitee_search
10. 组件“rc-resize-observer”使用组件“resize-observer-polyfill”实现

#resize-observer-polyfill源码
#地址：https://gitee.com/mirrors/resize-observer-polyfill
11. 组件“resize-observer-polyfill”通过MutationObserver加监控onresize等事件，实现了对元素宽度发生变化的监听

12. 浏览器的MutationObserver特性的兼容性意外的不错，感觉可以放心的使用了的感觉。

总结

最终的实现概述一下也很简单，就是使用MutationObserver对画面所有元素的属性变动进行监听，发生变化时，查看监听的目标元素是否发生了变化，如果发生了变化，就触发事件进行重新调整显示效果。

最终发现实现过程和预想的类似，但是没想到大神写的代码风格，果然还是不太懂，虽然大概看懂了什么意思。

如果有类似的功能需求可以考虑使用以上组件进行完成，毕竟大神们已经为咱们做好了兼容性支持，没有必要再自己去写原生实现了。

通过这次调查又一次对自己的水平没了自信，明天一定要好好的读一下这整套的源码，涨涨见识。