前言
昨天接到了第一个需求吧,目标就是一句话:把 @mtfe/react-dropdown 组件替换为 antd 的Select组件
用图来说就是从
到
分解一下工作点
表现当长度过长时,不会出现滚动条,而是向左或向右扩展
正常的过滤以及选择功能
具体实现:
要求 组件自由配置输入框与下拉框宽度样式 灵活配置下拉框相对位置
输入字符过滤,键盘上下键和回车可以在下拉框中控制选择内容
明确之后就可以具体开工了
步骤
一:熟悉旧代码
事情也比较简单,暂时需求只是替换页面一个组件,所以大致浏览一下页面代码,主要集中注意力到旧组件的逻辑
当然可能这里更难的是进行咱们美团内部 git 初始化,总之 clone 下仓库之后还是比较顺利的
二:熟悉ant-design
以前用过一些ant-design,所以简单熟悉一下各种 API,Select 中文文档还是说的比较直观的,说实话各种语法糖还是比较多的,这也是 ant 除了外观设计不错之外值得称道的点,不过过度设计和功能简洁实用之间度其实才是最难的点吧,虽然个人不太懂,但据说 ant 还是比较吊的,另外最近好像开始 SSE conf 报名了,感觉大神云集,想去看看啊,咳咳跑题了,总之设计要在 易用强大和过度设计之间取舍还是比较难的,希望自己有机会可以学习一下。
当阅读文档时还是比较顺利的,第二条(正常的过滤以及选择功能)ant 原生提供,所以这就完全不必费心,不得不再赞一个,功能确实比较强大,整体设计也简单、人性化
至于第一条,好像也可以很简单的解决了,直接用第二三个属性配置一下就就好了。ok,文章结束了
显然这个题目表示这篇文章尚未结束,第三个属性坑爹的失效了。
三:有一点问题
antd 的 dropdown 组件是相对页面绝对定位,并且是 JS 动态设置位