成角6 sdk填坑法

技术背景：棱角分明的蚂蚁佐罗

最大的前端团队偏爱的前端技术框架Angular，在国内有些让人无法接受。我会为棱角做一系列的填坑和分享。

第1坑：sdk

Angular sdk不属于每个模块，直接安装在车身下方。ant design直接使用sdk，这会导致任何弹出层，如select、dropdown、picker等。以便在弹出时自动创建一个覆盖整个情况的sdk。您需要单击sdk来关闭打开的下拉列表。

显然，产品在下拉列表出现之前点击两次是不可接受的。

解决方案有两种，一种是修改底层源代码，放弃sdk，显然代价很大，bug会层出不穷，建议缺乏前端架构团队的团队不要考虑。

我选择了另一个方案，有点棘手，但是可以很快解决问题。

第一步：

将sdk缩小到1x1px，这样鼠标就可以点击网页上的任何地方。CDK-叠加-背景{ width: 1px！重要；高： 1px！重要；}步骤2:监控文档点击事件

document . addeventlistener(' click '，(e)={ this . prepareHideModal(e)；});第三步：获取当前点击选择的唯一ID等。

有许多组件使用sdk，其中一些具有唯一的标识，但没有特殊处理

获取符号(e) {for (const v of e ['path']) {if (v .标记名==' NZ-select' | | v .标记名=' app-subject picker '){//下拉框获取符号if (v. classlist [0])。包括(' ng)else { this . sign=v . class list[1]；} this . sign type=' NZ-NORMAL '；打破；} else if(v . tagname==' NZ-picker '){//picker get sign this . sign=v . class list[0]；this . SignType=' NZ-PICKER '；打破；} //popover获取有效符号(v . getattributenode v . getattributenode(' NZ-Popo ver ')v . getattribute(' NZ-Popo ver ')==' '){ this。符号=' NZ-Popo ver '；this . sign TYPe=' NZ-POOVER '；打破；}}}步骤4:关闭打开的下拉组件

为什么叫prepareHideModal？这是拿到招牌前的操作。先关闭它，然后获取单击下拉列表的标志

关闭后执行getSign方法

prepareHideModal(e) {让doClose=trueif(window[' GlobalSignType ']){ this . HideAllModal()；window[' GlobalSignType ']=null；返回；}//如果有标志，关闭打开的if (this。sign) {let _ sign=this。签名；//判断某些情况下(_ sign==' NZ-popup ')是否未关闭{//解决没有特使标识时点击cdk本身不消失的问题。for(const v of e [' path ']){ if(v . class list v . class list . contains(' CDK-覆盖-容器'){ } } else {//当您指定符号时单击选择器本身不会消失。for(const v of e[' path ']){ if(v . class list v . class list . contains(_ sign)){ do close=false；打破；} } } DocLose this . HideModal(_ sign)；} this . GetSign(e)；}第五步：最重要的是关闭sdk。这里采用最简单的模拟sdk点击，完全使用sdk自己的方法

hideModal(sign){ let cdkDom=document . queryselectorall('。CDK-overlay-background . CDK-overlay-dark-background . CDK-overlay-background-show’；让domLen=cdkDom.length//循环cdk，找到自己的cdk，模拟点击隐藏(var I=0；i domLenI){ var v=CDkdom[I]；if (v['style']。展示！=' none '){ v[' click ']()；打破；} } this.sign=nullthis.signType=null}至此解决了skd组件需要点击两次，但会造成另一个坑。当滚动条出现在页面上时，打开的组件的位置不会随着滚动而改变。这个问题将在另一个博客中解决

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。