仅当文本过长时,执行某些操作(比如:弹出气泡显示完整内容,否则无需弹出)

tech2022-12-06  108

demo:

判断文本是否过长,过长就显示“我过长啦”。

效果:

测试数据:

dataArr: [{ id: 'test0', name: '哈哈哈哈哈', isOverflow: false }, { id: 'test1', name: '哈哈哈哈哈哈', isOverflow: false } ]

布局:

<div class="text-title">计算文本是否过长</div> <div class="text-item" v-for="(item,index) in dataArr" :key="index"> <div class="item-name single-text" :id="item.id"> <span class="dot"></span> <span class="text">{{item.name}}</span> </div> <div class="item-overflow" v-if="item.isOverflow">我超长啦</div> </div>

计算是否过长(核心):

isTextOverflow(elId, padding) { if (!elId) { return } let isShow = false; let cellChild = document.getElementById(elId); if (cellChild) { const range = document.createRange(); range.setStart(cellChild, 0); range.setEnd(cellChild, cellChild.childNodes.length); const rangeWidth = range.getBoundingClientRect().width; if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) { isShow = true; } } return isShow; }

childNodes 属性返回节点的子节点集合

计算、更新数据:

setTimeout(() => { for (var i = 0; i < this.dataArr.length; i++) { let obj = this.dataArr[i]; if (obj) { this.$set(obj, 'isOverflow', this.isTextOverflow(obj.id, 100)); } } }, 10);

对象obj在执行this.$set()更新前,必须持有isOverflow属性,否则在部分安卓手机,更新数据会无效。

部分css:

.text-item .item-name { padding: 0px 50px; width: 100px; background-color: #E8E8E8; } .single-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

写完啦,(*^▽^*)

最新回复(0)