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-width3.$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;});}}
.doc)
