// 參數1:判斷的dom元素
// 參數2:判斷的當前幾行
// 參數3:當前dom元素的css
// 參數4:是否移除復制的dom元素
const isElementCollision = (ele, rowCount = 1, cssStyles, removeChild) => { if (!ele) { return false; } const clonedNode = ele.cloneNode(true); // 給clone的dom增加樣式 clonedNode.style.overflow = "visible"; clonedNode.style.display = "inline-block"; clonedNode.style.width = "auto"; clonedNode.style.whiteSpace = "nowrap"; clonedNode.style.visibility = "hidden"; // 將傳入的css字體樣式賦值 if (cssStyles) { Object.keys(cssStyles).forEach((item) => { clonedNode.style[item] = cssStyles[item]; }); } // 給clone的dom增加id屬性 const containerID = "collision_node_id"; clonedNode.setAttribute("id", containerID); let tmpNode = document.getElementById(containerID); let newNode = clonedNode; if (tmpNode) { document.body.replaceChild(clonedNode, tmpNode); } else { newNode = document.body.appendChild(clonedNode); } // 新增的dom寬度與原dom的寬度*限制行數做對比 const differ = newNode.offsetWidth - ele.offsetWidth * rowCount; if (removeChild) { document.body.removeChild(newNode); } return differ > 0; };
使用:
this.$nextTick(() => { var dom = document.getElementById("remarks"); let cssStyles = { fontSize: "14px", letterSpacing: 0, fontWeight: 400, };
var fiveFlag = isElementCollision(dom, 2, cssStyles, true);
});