vue项目，当鼠标移入时文本长度超出才显示所有内容

这是一个UI 优化的需求~

需求说明

须要实现的效果呢，就是下图这个样子（截图的时候光标就会消失，只好拍照咯~）。

鼠标滑入显示所有文字内容，就是在文本上加个title属性，并且这是个数组循环出来的列表，这就致使了列表的全部文本在鼠标滑入时都会显示文字。

咱们这里的优化需求是，文本内容很长的时候（至少都出现了省略号了嘛），鼠标滑入才显示所有文字内容。

解决方案

dom结构改造

解决思路先要明确，在文本标签上再套个容器，固定外容器的宽度，计算文本标签的长度，相比较，超出时候才会在文本标签上添加title属性。

按照这个思路，页面结构就这样写

<div v-for="(item, i) in formList" :key="i"> <div @click="viewMyForm(item)"> <i :class="$style.formIcon"></i> <div :class="$style.title"> <span :title="titles[i]" :id="`nameLabel${item.formId}`">{{ item.formName }}</span> </div> </div></div>

逻辑处理

在获取列表的方法中添加如下代码。

this.$nextTick(() => { this.formList.forEach((f, i) => { const item = document.querySelector<HTMLDivElement>(`#nameLabel${f.formId}`); if (item) {            const width = item.offsetWidth; this.titles.push(width > 200 ? f.formName : ""); } });});

嘻，以你的聪明才智，这段代码也不须要额外解释了吧~

啥是nextTick

但这里须要提一下这个 nextTick 的使用。

Vue.nextTick() 定义，在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。

其实能够这样理解，是将回调函数延迟在下一次dom更新数据后调用，通俗点就是：当数据更新了，在dom中渲染后，自动执行该函数。

---

本文分享自微信公众号 - 前端一块儿学（gh_3ba18d51f982）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。