快捷導(dǎo)航

angular6 填坑之sdk的方法

更新時(shí)間：2018年12月27日 11:14:24 作者：wangmiao2606

這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

技術(shù)背景：angular + ant zorro

最為大型前端團(tuán)隊(duì)首選的前端技術(shù)框架，angular，在國內(nèi)多少還是有些水土不服。本人將針對angular做個(gè)一系列的填坑分享。

坑一：sdk

angular的sdk不屬于各個(gè)模塊，直接掛載在body下面， ant design直接使用sdk，導(dǎo)致任何的彈出層，如select，dropdown，picker等在彈出來的時(shí)候自動創(chuàng)建覆蓋全局的sdk，需要點(diǎn)擊sdk才能關(guān)閉已打開的下拉。

明顯需要點(diǎn)擊兩次才能出現(xiàn)一個(gè)下拉是產(chǎn)品們不能接受的。

解決方案有兩個(gè)，一個(gè)是修改底層源碼，拋棄sdk，明顯成本巨大，而且bug會層出不窮，考慮不周全，建議缺少前端架構(gòu)組的團(tuán)隊(duì)就不用考慮了。

本人選擇了另外一個(gè)方案，有點(diǎn)取巧，但是能快速解決問題。

步奏一：

將sdk縮小至1x1px，讓鼠標(biāo)可以點(diǎn)擊網(wǎng)頁中任意地方。

.cdk-overlay-backdrop {

  width: 1px!important;

  height: 1px!important;

}

步奏二：監(jiān)聽document點(diǎn)擊事件

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

});

步奏三：獲取當(dāng)前點(diǎn)擊的select等的唯一標(biāo)識

使用sdk的組件比較多，有的有唯一標(biāo)識，沒有的特殊處理

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;

      }

    }

  }

步奏四：關(guān)閉已打開的下拉組件

為什么叫prepareHideModal，這是獲取sign前的操作，先關(guān)閉再去獲取點(diǎn)擊下拉的sign

getSign方法在關(guān)閉后執(zhí)行

prepareHideModal(e) {

    let doClose = true;

    if (window['globalSignType']) {

      this.hideAllmodal();

      window['globalSignType'] = null;

      return;

    }

    // 如果有sign，關(guān)閉已打開的

    if (this.sign) {

      let _sign = this.sign;

      // 判斷某些情況下不關(guān)閉彈框

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

        // 解決沒有特使標(biāo)識時(shí)點(diǎn)擊cdk本身不消失

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

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

            doClose = false;

          }

        }

      } else {

        // 常規(guī)有指定sign時(shí)點(diǎn)擊選擇器自身時(shí)不消失

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

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

            doClose = false;

            break;

          }

 

        }

      }

      doClose && this.hideModal(_sign);

    }

    this.getSign(e);

  }

步奏五：最重要的關(guān)閉sdk，這邊采用了最簡單的，模擬sdk點(diǎn)擊，完全使用sdk自己的方法

hideModal(sign) {

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

    let domLen = cdkDom.length;

    // 循環(huán)cdk，找到它自身的cdk，模擬點(diǎn)擊隱藏

    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組件需要點(diǎn)擊兩次的坑，但是會引起另外一個(gè)坑，當(dāng)頁面出現(xiàn)滾動條時(shí)，已打開的下來組件位置不會跟著滾動而去改變。這邊會在另外一篇博客中解決

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: