vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)
vue項(xiàng)目開發(fā)的過程中，如果需要文字溢出的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頁面文本過長顯示...鼠標(biāo)懸停顯示全文本
項(xiàng)目使用vue+element UI，列表頁面修改某一列的樣式，這一列的文本過長，在表格中會(huì)自動(dòng)換行，會(huì)將表格撐大，影響頁面美觀，需求就是讓文本顯示超過長度后面顯示…，鼠標(biāo)移上去后顯示全文本，網(wǎng)上可以使用：cell-style修改，但是在我的webstorm中，都沒有這個(gè)屬性提示，不過有：row-style屬性，這個(gè)很明顯是修改行的樣式，后來發(fā)現(xiàn)有這么一個(gè)屬性值可以完美解決這個(gè)問題。
還有一個(gè)類似的需求，文本過長顯示…，鼠標(biāo)移上去之后，顯示全文本，可以給這個(gè)屬性上面增加樣式：style=“text-overflow: ellipsis; overflow: hidden” 然后增加 :title="item2.modelName"屬性和值，可以解決這個(gè)問題。
以上這篇vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition?API進(jìn)行了封裝，更多相關(guān)內(nèi)容感興趣的朋友可以參考一下2022-06-06
vue setInterval 定時(shí)器失效的解決方式
這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-form表單驗(yàn)證是否為空值的實(shí)例詳解
今天小編就為大家分享一篇vue-form表單驗(yàn)證是否為空值的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問題
這篇文章主要介紹了vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue中v-for通過動(dòng)態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果
這篇文章主要介紹了vue中v-for通過動(dòng)態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10