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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。