vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)
vue項目開發(fā)的過程中，如果需要文字溢出的dom元素鼠標懸浮時才顯示title文字的話，可以封裝一個自定義的指令。
方法一、
組件內(nèi)代碼如下：
directives: {
title: {
inserted(el) {
const { clientWidth, scrollWidth, title } = el;
if (!title && scrollWidth > clientWidth) el.title = el.innerText;
}
}
},
使用：
<article v-title>修修的鐵拳修修的鐵拳修修的鐵拳修修的鐵拳修修的鐵拳</article>
方法二、
或者鼠標進入后dom后方法處理，方法如下：
titeEnter(e) {
const target = e.target;
const { clientWidth, scrollWidth, title } = target;
if (!title && scrollWidth > clientWidth) target.title = target.innerText;
},
使用：
<article @mouseenter="titleEnter">修修的鐵拳修修的鐵拳修修的鐵拳修修的鐵拳修修的鐵拳</article>
補充知識：vue頁面文本過長顯示...鼠標懸停顯示全文本
項目使用vue+element UI，列表頁面修改某一列的樣式，這一列的文本過長，在表格中會自動換行，會將表格撐大，影響頁面美觀，需求就是讓文本顯示超過長度后面顯示…，鼠標移上去后顯示全文本，網(wǎng)上可以使用：cell-style修改，但是在我的webstorm中，都沒有這個屬性提示，不過有：row-style屬性，這個很明顯是修改行的樣式，后來發(fā)現(xiàn)有這么一個屬性值可以完美解決這個問題。
還有一個類似的需求，文本過長顯示…，鼠標移上去之后，顯示全文本，可以給這個屬性上面增加樣式：style=“text-overflow: ellipsis; overflow: hidden” 然后增加 :title="item2.modelName"屬性和值，可以解決這個問題。
以上這篇vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
springboot和vue前后端交互的實現(xiàn)示例
本文主要介紹了springboot和vue前后端交互的實現(xiàn)示例,將包括一個簡單的Vue.js前端應用程序,用于發(fā)送GET請求到一個Spring Boot后端應用程序,以獲取并顯示用戶列表,感興趣的可以了解一下2024-05-05
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導出excel表格,比如將table中的數(shù)據(jù)導出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue canvas繪制矩形并解決由clearRec帶來的閃屏問題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來的閃屏問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue項目打包后proxyTable代理失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2023-05-05
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
vue使用element-plus依賴實現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細介紹了vue使用element-plus依賴實現(xiàn)表格增加,文中示例代碼講解的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-12-12
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue和iview結(jié)合動態(tài)生成表單實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用2022-06-06
前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網(wǎng)斷了,都會導致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學習一下如何使用vue實現(xiàn)大文件切片上傳吧2023-11-11