在項(xiàng)目中我們通過(guò)tooltip來(lái)處理溢出顯示省略號(hào),劃過(guò)進(jìn)行展示轮纫。一般會(huì)選用Element UI中tooltip組件。在此基礎(chǔ)上實(shí)現(xiàn)溢出才顯示tooltip需求。
var checkName = document.getElementsByClassName('check_name')
for (var i =0; i < checkName.length; i++) {
????if (checkName[i].clientWidth < checkName[i].scrollWidth) {
????????this.check_name.push(checkName[i].innerText)
????}
}
獲取到此元素脑慧,循環(huán)遍歷,當(dāng)元素的clientWidth 小于scrollWidth時(shí)砰盐,會(huì)出現(xiàn)省略號(hào)闷袒,將此元素的文字放在一個(gè)數(shù)組中,判斷當(dāng)前數(shù)組中有沒(méi)有溢出元素的文字來(lái)顯示tootip check_name.indexOf(label.name)
單行的省略號(hào)通過(guò)clientWidth 及scrollWidth來(lái)判斷
多行的省略號(hào)通過(guò)clientHeight及scrollHeight來(lái)判斷