// 参数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);
});