那些你不知道的 getClientRects()

mingzhong 发布于2019-08-23 12:10 / 1381人阅读

摘要：是可以获取内联元素的内容有多少行最近一个交互，在限定文字展现是行，超过行，则在后面添加。。。但是为了交互更人性化来看看代码，是如何实现的一定要弄一个默认的来判断行数，得到行嗯能显示什么文字。

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上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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