vue渲染数组各子项实现文本超出宽度显示tooltip

vue渲染数组各子项实现文本超出宽度显示tooltip

需求背景

vue项目中，通过v-for渲染数组，子项中均存在一行描述文字。当描述文字超出固定宽度时，显示省略号并且鼠标悬浮时显示tooltip；当描述文字不超出固定宽度时则正常显示，且鼠标悬浮不显示tooltip

否决方案

否决的两个方案均基于文本宽度与容器宽度的计算，具体实现将在后续实际方案中再进行详细阐述。否决方案仅做思路阐述，不做过于具体的赘述

1.存储各子项宽度计算结果

• 具体实现：各子项描述文字容器绑定独有的ref，页面挂载完成后遍历各ref获取到对应元素并计算文本宽度与容器宽度关系，将计算结果存储在数组中。根据该结果通过v-if进行判断是否渲染tooltip
• 否决原因：需要计算并存储所有子项的宽度对比，在数组量较大的情况下会有一定的性能问题。且在部分情境下，还需要考虑页面resize事件后是否要重新计算的问题

2.宽度计算结果实时应用渲染

• 具体实现：各子项描述文字容器绑定独有的ref，各子项通过v-if绑定宽度计算函数，计算函数通过ref获取到对应元素并计算文本宽度与容器宽度关系，并返回计算结果。
• 否决原因：v-if绑定的计算函数，内部需要在页面渲染完成后才能获取到对应的元素进行计算，但是无论是使用$nextTick还是结合Promise微任务都无法做到在渲染完成后计算结果并返回用于渲染更新

实现方案

宽度计算（核心）

// clientWidth为容器宽度，scrollWidth为文本完全展示时的实际宽度
isOverflowing(element) {return element ? element.scrollWidth > element.clientWidth : false
},

tooltip控制

<!-- 固定渲染tooltip，但手动控制显隐  -->
<a-tooltip:title="item.des"placement="top":visible="visibleId == item.id">
</a-tooltip>

悬浮计算

<!-- 元素悬浮时才进行宽度计算 -->
<div:ref="'textRef_' + item.id"class="des"@mouseenter="handleMouseEnter(item.id)"@mouseleave="handleMouseLeave"
>{{ item.des }}
</div>

计算结果存储

// 处理鼠标进入事件
handleMouseEnter(id) {// 此处refs返回的是一个数组// 若并非绑定在v-for数组内部的子元素上时，refs返回的则是单个元素，需注意区分// 不一定需要refs才能获取到元素，通过事件本身传递的event对象也可获取到对应targetconst element = this.$refs['textRef_' + id][0]if (this.isOverflowing(element)) {this.visibleId = id}
},
// 处理鼠标离开事件
handleMouseLeave() {this.visibleId = ''
},

完整代码

<template><divv-for="(item, index) in list":key="index"class="module_item"><div class="module_header"><div class="module_title"><div class="title">{{ item.title }}</div><a-tooltip:title="item.des"placement="top":visible="visibleId == item.id"><div:ref="'textRef_' + item.id"class="des"@mouseenter="handleMouseEnter(item.id)"@mouseleave="handleMouseLeave">{{ item.des }}</div></a-tooltip></div></div><div class="module_content"><!-- 内容 -->  </div></div>
</template><script>
export default {data() {return {visibleId: '',list: []}},methods: {isOverflowing(element) {return element ? element.scrollWidth > element.clientWidth : false},// 处理鼠标进入事件handleMouseEnter(id) {const element = this.$refs['textRef_' + id][0]if (this.isOverflowing(element)) {this.visibleId = id}},// 处理鼠标离开事件handleMouseLeave() {this.visibleId = ''},}
}
</script><style lang="less" scoped>
.module_item {margin-top: 0.12rem;&:first-child {margin-top: 0;}.module_header {display: flex;justify-content: space-between;align-items: center;.module_title {display: flex;align-items: center;gap: 0.08rem;.title {color: #000;font-size: 0.14rem;}.des {width: 1.83rem;color: #999;font-size: 0.1rem;text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}.modules {margin-top: 0.08rem;display: flex;gap: 0.08rem;}
}
</style>

总结

1. 悬浮时计算，不需要一次性计算所有元素的计算结果，性能良好
2. 仅存储单个宽度计算结果控制显隐，无需冗余数据
3. 无需v-if进行判断渲染