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 相关文章推荐
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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
一个捕获函数输出的函数
2007/02/14 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue.config.js常用配置详解
2019/11/14 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python入门教程之基本算术运算符
2020/11/13 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
挂科检讨书范文
2014/02/20 职场文书
车间机修工岗位职责
2014/02/28 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
体检通知范文
2015/04/21 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
创业计划书之面包店
2019/09/17 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android