那些你不知道的 getClientRects()

mingzhong 發布于2019-08-23 12:10 / 1405人閱讀

摘要：是可以獲取內聯元素的內容有多少行最近一個交互，在限定文字展現是行，超過行，則在后面添加。。。但是為了交互更人性化來看看代碼，是如何實現的一定要弄一個默認的來判斷行數，得到行嗯能顯示什么文字。

1.getClientRects()。是可以獲取內聯元素的內容有多少行

最近一個交互，在限定文字展現是5行，超過5行，則在后面添加。。。展開。如果沒有展開二字，我們一般用css就能完成了。但是為了交互更人性化

text-overflow:
-o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;

來看看代碼，是如何實現的,一定要弄一個默認的span來判斷行數，得到5行嗯能顯示什么文字。然后記錄下來

 let txtDom = this.$refs.textContainer;
            txtDom.innerHTML = originalTxt; //第一次全部渲染
            let showtxtdom = originalTxt;
            let texLength = txtDom.getClientRects();
            let h = getLength(texLength);
            let tl = 0;
            if (h <= 5) {
              obj.unfoldFlag = false;
            } else {
              obj.unfoldFlag = true;
            }
            
             while (h > 5) {
              var step = 1;
              if (/
$/.test(showtxtdom)) {
                //回退的時候，如果碰到換行要整體替換
                step = 5;
              }
              showtxtdom = showtxtdom.slice(0, -step);
              //console.log(showtxtdom);
              txtDom.innerHTML =
                showtxtdom +
                "...展開";
              // console.log(txtDom.innerHTML);
              h = getLength(txtDom.getClientRects());
              tl += step;
            }obj.showTxt = showtxtdom;
            //點贊是否是已經默認的
            obj.statedefaut = item.state;
            obj.imgsrcselect =
              "http://img.58cdn.com.cn/chinahr/img/agree_ic_sel@3x.gif?" +
              new Date().getTime();
            let regroupdata = Object.assign({}, obj, item);
            return regroupdata;
          });
          // console.log(newlist);
          //this.$set(this.commentListdata.commentList, newlist);
          this.commentListArrObj = this.commentListArrObj.concat(newlist);
          this.commentListdata = communitydetailData.data;
          this.commentListdata.commentList = this.commentListArrObj;
          // console.log(this.commentListdata);
          return;
        }

2.getBoundingClientRect() 獲取盒模型，元素的高度和定位,left +top.在vue里面經常遇到

Element.getBoundingClientRect().width =  border-left-width + padding-left + width + padding-right + border-right-width

Element.getBoundingClientRect().height =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

3.$nextTick 的應用／nextTick：在下次 DOM 更新循環結束之后執行延遲回調。

很多時候我們需要做到，動態算content的高度，就要手動減去頭部+尾部的高度。我們需要等到數據加載完成之后，在做操作

方法就是監聽數據的變化，然后在監聽里面做搞的元算

watch: {
     commentListdata: function() {
       this.$nextTick(() => {
         //console.log("--nextTick--");
         this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
         this.hasnowrapHeight = this.wrapperHeight - this.$refs.commmainwrap.getBoundingClientRect().height - this.$refs.commfootwrap.getBoundingClientRect().height;
       });
     }
   }

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98039.html

原生js實現offset方法

摘要：通過遞歸實現遞歸獲取可以考慮使用非終止遞歸繼續遞歸父節點獲取值后退出遞歸執行通過實現當前為以下直接返回當前節點的時直接返回方法返回元素的大小及其相對于視口的位置。返回值包含了一組用于描述邊框的只讀屬性和，單位為像素。在為 jTool 提供 offset (獲取當前節點位置）方法時，先后使用了兩種方式進行實現，現整理出來以作記錄。通過遞歸實現 function offset(el...

libxd 2019-08-26 13:52 評論0 收藏0
前端增長-你不知道的那些細節

摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端精心打造全新課程，歡迎吐槽！反饋寶貴意見！在線課程：前...

asce1885 2019-08-02 15:31 評論0 收藏0
前端增長-你不知道的那些細節

摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端精心打造全新課程，歡迎吐槽！反饋寶貴意見！在線課程：前...

Lyux 2019-08-23 18:40 評論0 收藏0
前端增長-你不知道的那些細節

摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端精心打造全新課程，歡迎吐槽！反饋寶貴意見！在線課程：前...

baishancloud 2019-08-30 11:23 評論0 收藏0