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