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-widthElement.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;});}}