angular6 填坑之sdk的方法


Posted in Javascript onDecember 27, 2018

技术背景:angular + ant zorro

最为大型前端团队首选的前端技术框架,angular,在国内多少还是有些水土不服。本人将针对angular做个一系列的填坑分享。

坑一:sdk

angular的sdk不属于各个模块,直接挂载在body下面, ant design直接使用sdk,导致任何的弹出层,如select,dropdown,picker等在弹出来的时候自动创建覆盖全局的sdk,需要点击sdk才能关闭已打开的下拉。

明显需要点击两次才能出现一个下拉是产品们不能接受的。

解决方案有两个,一个是修改底层源码,抛弃sdk,明显成本巨大,而且bug会层出不穷,考虑不周全,建议缺少前端架构组的团队就不用考虑了。

本人选择了另外一个方案,有点取巧,但是能快速解决问题。

angular6 填坑之sdk的方法

步奏一:

将sdk缩小至1x1px,让鼠标可以点击网页中任意地方。

.cdk-overlay-backdrop {

  width: 1px!important;

  height: 1px!important;

}

步奏二:监听document点击事件

document.addEventListener('click', (e) => {
  this.prepareHideModal(e);

});

步奏三:获取当前点击的select等的唯一标识

使用sdk的组件比较多,有的有唯一标识,没有的特殊处理

getSign(e) {

    for (const v of e['path']) {

      if (v.tagName == 'NZ-SELECT' || v.tagName == 'APP-SUBJECTPICKER') {

        // 下拉框获取sign

        if (v.classList[0].includes('ng-tns-')) {

          this.sign = v.classList[0];

        } else {

          this.sign = v.classList[1];

        }

        this.signType = 'NZ-NORMAL';

        break;

      } else if (v.tagName == 'NZ-PICKER') {

        // picker 获取sign

        this.sign = v.classList[0];

        this.signType = 'NZ-PICKER';

        break;

      }

      // popover 获取sign

      if (v.getAttributeNode && v.getAttributeNode('nz-popover') && v.getAttribute('nz-popover') == '') {

        this.sign = 'NZ-POPOVER';

        this.signType = 'NZ-POPOVER';

        break;

      }

    }

  }

步奏四:关闭已打开的下拉组件

为什么叫prepareHideModal,这是获取sign前的操作,先关闭再去获取点击下拉的sign

getSign方法在关闭后执行

prepareHideModal(e) {

    let doClose = true;

    if (window['globalSignType']) {

      this.hideAllmodal();

      window['globalSignType'] = null;

      return;

    }

    // 如果有sign,关闭已打开的

    if (this.sign) {

      let _sign = this.sign;

      // 判断某些情况下不关闭弹框

      if (_sign == 'NZ-POPOVER') {

        // 解决没有特使标识时点击cdk本身不消失

        for (const v of e['path']) {

          if (v.classList && v.classList.contains('cdk-overlay-container')) {

            doClose = false;

          }

        }

      } else {

        // 常规有指定sign时点击选择器自身时不消失

        for (const v of e['path']) {

          if (v.classList && v.classList.contains(_sign)) {

            doClose = false;

            break;

          }

 

        }

      }

      doClose && this.hideModal(_sign);

    }

    this.getSign(e);

  }

步奏五:最重要的关闭sdk,这边采用了最简单的,模拟sdk点击,完全使用sdk自己的方法

hideModal(sign) {

    let cdkDom = document.querySelectorAll('.cdk-overlay-backdrop.cdk-overlay-dark-backdrop.cdk-overlay-backdrop-showing');

    let domLen = cdkDom.length;

    // 循环cdk,找到它自身的cdk,模拟点击隐藏

    for (var i = 0; i < domLen; i++) {

      var v = cdkDom[i];

      if (v['style'].display != 'none') {

        v['click']();

        break;

      }

    }

    this.sign = null;

    this.signType = null;

  }

至此算是解决了使用skd组件需要点击两次的坑,但是会引起另外一个坑,当页面出现滚动条时,已打开的下来组件位置不会跟着滚动而去改变。这边会在另外一篇博客中解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 #Javascript
React降级配置及Ant Design配置详解
Dec 27 #Javascript
详解Ant Design of React的安装和使用方法
Dec 27 #Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 #Javascript
You might like
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
详解js中==与===的区别
2017/01/08 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue $mount 和 el的区别说明
2020/09/11 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python双向循环链表实现方法分析
2018/07/30 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
毕业生教师求职信
2013/10/20 职场文书
同学聚会主持词
2014/03/18 职场文书
门店业绩提升方案
2014/06/08 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
个人事迹材料范文
2014/12/29 职场文书
家长反馈意见及建议
2015/06/03 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫