关于 Ant Design 的一些笔记

说实话个人感觉这个框架还是很不错的，for React 和 for Vue 的都用过，相对来说 Vue 版本的更加轻松、灵活一些，React 版本的总感觉用起来束手束脚，不够灵活，不知道是不是语言特性，哈哈，这只是我个人感觉，碎碎念…

Tooltip & Popover

Tooltip 应该是我们会经常使用到的小可爱，就算项目整体不是用 Ant design 进行搭建，也可以进行使用，而且还挺好用的，废话不多说，我踩过坑如下：

1.设置 tooptip 和 popover 的样式无效？

原因：tooltip 是 hover 之后才进行创建的节点，而且其是默认生成在 body 标签中，所以如果将 css 写在某个选择器的子选择器中，是渲染不到的。

解：修改其生成 dom 的位置，官方有 getPopupContainer API ，可以选择其生成的位置，但是返回值必须是一个 Node 节点，常用修改代码如下

 <Tooltip title="prompt text" getPopupContainer={trigger=>trigger.parentNode}/>

这样就能使生成的 tooltip 生成在触发的节点的父节点中，再使用子选择器中的 css 就可以生效啦

另外：官方 API 中的 overlayStyle 只能修改 tooltip-inner 的样式，如果修改了背景颜色，就会发现外面一圈是黑色，而里面是自己设置的颜色。如果想要全部改，不能只用 overlayStyle，还需要修改 tooltip-outter 和 那一个小角的颜色。所以最好干脆不用 overlayStyle 直接将样式全部写在 css 中更好

2.小角标的位置有时候会不准确，会偏移一些？

原因：可能是没设置 arrowPointAtCenter 属性，但是，有时候设置了这个属性还是会标的位置不对

解：可以在 onVisibleChange 的回调中，当回调参数为 true 时（也就是显示时），添加一个 setTimeout(callback,0) 对其进行调整，在 callback 中直接获取 dom 修改其位置。

需要注意的是：生成的 dom 的位置是绝对定位，而且是内联样式，添加 class 是不起作用的，必须要获取 dom 直接修改内联样式才可以修正其位置。

为什么要 setTimeout 呢？
因为在 onVisibleChange 处理的时候还没有生成 dom 所以直接获取是获取不到的，所以需要 setTimeout 才能获取到。

3.将其设置在一个原本就有绝对定位的元素上时可能会消失或者位置不对？

原因：暂时不清楚原因，但是如果仔细找会发现其实它已经生成了，只是不知道生成到什么地方了，可能是 top:-9999 或者什么天涯海角去了。

解：所以只能如上个问题的解法，暴力一点，直接获取 dom 修改位置就好。

Select

其实这个组件的坑跟上一个也差不多，就是组件选项生成的位置的坑点，如果单独使用可能不会经常遇到我所说的这些坑，但是两个合起来使用，这酸爽。。。因为之前项目做过在一个 tooltip 中放放一个 select ，还要默认展开，就出现了 select 的下拉选项栏不知道飞到哪里去了，印象深刻，所以做个记录。

1.添加了 defaultOpen 下拉选项栏还是不会默认出现？

原因：与上面 tooltip 差不多，就是在一个已经绝对定位了的元素上使用了这个组件，生成的下拉选项栏的位置就会出现异常。

解：跟上面的方法一样，在 onFocus 事件上直接获取 dom 修改位置就好了，也还是需要 setTimeout 。

另外：生成的选项栏会自动归位，应该是源码中每次都会计算相应的位置，但是没有研究过，只是猜测。

2.默认的搜索选项功能无效？

原因：因为 select 中的值是 select-option 中的 key 值，所以搜索的时候也是搜索相应的 key 值，而我们常常将 key 设置为 id ，所以导致搜索不到。

解：将 key 值设为选项中展示的值，如果要展示的 title 就将 key 设为 title 。

另外：其中的 key 是区分类型的，如果给的是 string 类型，拿到的也是 string 类型，这里可能会有一点小坑。

3. onChange 事件只能拿到 key 值，不能拿到其他的值 （Vue 版本）

原因：因为 select 的 value 就是 select-option 中的 key 值，当然，拿到 key 值再去 filter 一下数据的数组也能拿到想要的值，但是总感觉不爽，dom 层面已经 forEach 渲染过了，取其中一个的数据还要再一次 forEach 感觉很不爽，相当不爽。

解：可以直接在 select-option 的 dom 中设置属性，在 onChange 事件中，第一个参数是选择的选项的 key 值，第二个参数就是选择的选项的 dom ，可以在其中取出想要的值。（*注：此解法适用于 Vue 版本，React 版本暂时没有试过，感兴趣的同学可以试一下告诉我哦，谢谢）

写在最后

因为本人还没毕业，还是实习生，可能遇到的问题比较简单，细心总能发现和解决，所以希望大佬们能多多包涵。如果有冒犯的地方也烦请各位大佬指出，本人一定虚心改正，其实我认为能认识到自己的错误才能更好的成长，成长就是一个不断试错，查漏补缺的过程，希望大佬不吝赐教，谢谢大家。