資訊專欄INFORMATION COLUMN
摘要：是可以獲取內(nèi)聯(lián)元素的內(nèi)容有多少行最近一個(gè)交互，在限定文字展現(xiàn)是行，超過行，則在后面添加。。。但是為了交互更人性化來看看代碼，是如何實(shí)現(xiàn)的一定要弄一個(gè)默認(rèn)的來判斷行數(shù)，得到行嗯能顯示什么文字。
1.getClientRects()。是可以獲取內(nèi)聯(lián)元素的內(nèi)容有多少行
最近一個(gè)交互，在限定文字展現(xiàn)是5行，超過5行，則在后面添加。。。展開。如果沒有展開二字，我們一般用css就能完成了。但是為了交互更人性化
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
來看看代碼，是如何實(shí)現(xiàn)的,一定要弄一個(gè)默認(rèn)的span來判斷行數(shù)，得到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)) {
//回退的時(shí)候，如果碰到換行要整體替換
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;
//點(diǎn)贊是否是已經(jīng)默認(rèn)的
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里面經(jīng)常遇到
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-width3.$nextTick 的應(yīng)用／nextTick：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。
很多時(shí)候我們需要做到，動(dòng)態(tài)算content的高度，就要手動(dòng)減去頭部+尾部的高度。我們需要等到數(shù)據(jù)加載完成之后，在做操作
方法就是監(jiān)聽數(shù)據(jù)的變化，然后在監(jiān)聽里面做搞的元算
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;
});
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98039.html
摘要：通過遞歸實(shí)現(xiàn)遞歸獲取可以考慮使用非終止遞歸繼續(xù)遞歸父節(jié)點(diǎn)獲取值后退出遞歸執(zhí)行通過實(shí)現(xiàn)當(dāng)前為以下直接返回當(dāng)前節(jié)點(diǎn)的時(shí)直接返回方法返回元素的大小及其相對(duì)于視口的位置。返回值包含了一組用于描述邊框的只讀屬性和，單位為像素。 在為 jTool 提供 offset (獲取當(dāng)前節(jié)點(diǎn)位置）方法時(shí)， 先后使用了兩種方式進(jìn)行實(shí)現(xiàn)， 現(xiàn)整理出來以作記錄。 通過遞歸實(shí)現(xiàn) function offset(el...
摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細(xì)節(jié)附贈(zèng)常見核心前端面試問題與詳細(xì)解答官方博客前端學(xué)堂課件腦圖下載課程介紹前端知識(shí)點(diǎn)很多，很細(xì)碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...
摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細(xì)節(jié)附贈(zèng)常見核心前端面試問題與詳細(xì)解答官方博客前端學(xué)堂課件腦圖下載課程介紹前端知識(shí)點(diǎn)很多，很細(xì)碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...
摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細(xì)節(jié)附贈(zèng)常見核心前端面試問題與詳細(xì)解答官方博客前端學(xué)堂課件腦圖下載課程介紹前端知識(shí)點(diǎn)很多，很細(xì)碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...
閱讀 1572·2021-10-14 09:42
閱讀 3815·2021-09-07 09:59
閱讀 1292·2019-08-30 15:55
閱讀 572·2019-08-30 11:17
閱讀 3337·2019-08-29 16:06
閱讀 500·2019-08-29 14:06
閱讀 3123·2019-08-28 18:14
閱讀 3642·2019-08-26 13:55
