那些你不知道的 getClientRects()

最新推荐文章于 2022-03-30 11:22:59 发布

weixin_34379433

最新推荐文章于 2022-03-30 11:22:59 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016541461

本文介绍了一种使用JavaScript和CSS实现前端文本自动截断并添加展开功能的方法，通过getClientRects()和getBoundingClientRect()精确控制文本显示行数，同时利用Vue.js的$nextTick确保DOM更新后的正确测量。

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 (/<br\/>$/.test(showtxtdom)) {
                //回退的时候，如果碰到换行要整体替换
                step = 5;
              }
              showtxtdom = showtxtdom.slice(0, -step);
              //console.log(showtxtdom);
              txtDom.innerHTML =
                showtxtdom +
                '<span>...</span><span class="comm-item-content-spread-s">展开</span>';
              // 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;
       });
     }
   }