这是一个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(`#nameLabel${f.formId}`); if (item) {constwidth=item.offsetWidth; this.titles.push(width > 200 ? f.formName : ""); } });});
嘻，以你的聪明才智，这段代码也不需要额外解释了吧~啥是nextTick但这里需要提一下这个nextTick 的使用。
Vue.nextTick() 定义，在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
其实可以这样理解，是将回调函数延迟在下一次dom更新数据后调用，通俗点就是：当数据更新了，在dom中渲染后，自动执行该函数。
