最为大型前端团队首选的前端技術框架angular,在国内多少还是有些水土不服本人将针对angular做个一系列的填坑分享。
angular的cdk不属于各个模块直接挂载在body下面, ant design直接使用cdk导致任哬的弹出层,如selectdropdown,picker等在弹出来的时候自动创建覆盖全局的cdk需要点击cdk才能关闭已打开的下拉。
明显需要点击两次才能出现一个下拉是产品们不能接受的
解决方案有两个,一个是修改底层源码抛弃cdk,明显成本巨大而且bug会层出不穷,考虑不周全建议缺少前端架构组的團队就不用考虑了。
本人选择了另外一个方案有点取巧,但是能快速解决问题
将cdk缩小至1x1px,让鼠标可以点击网页中任意地方
步奏二:監听document点击事件
步奏三:获取当前点击的select等的唯一标识
使用cdk的组件比较多,有的有唯一标识没有的特殊处理
步奏四:关闭已打开的下拉组件
为什么叫prepareHideModal,这是获取sign前的操作先关闭再去获取点击下拉的sign
getSign方法在关闭后执行
步奏五:最重要的关闭cdk这边采用了最简单的,模拟cdk点击完全使用cdk洎己的方法
至此算是解决了使用skd组件需要点击两次的坑,但是会引起另外一个坑当页面出现滚动条時,已打开的下来组件位置不会跟着滚动而去改变这边会在另外一篇博客中解决