vue單行文本溢出會出現(xiàn)title提示自定義指令
更新時(shí)間：2023年01月18日 10:04:00 作者：qb
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
平時(shí)開發(fā)中，如果標(biāo)題超出一行，我們希望為其添加title的提示，但是，如果統(tǒng)一加title=xxx，會出現(xiàn)，文本是否超出都會出現(xiàn)title的現(xiàn)象。
1、直接使用title
<template>
<div class="parent">
<h3>古詩：</h3>
<div class="child" :title="msg">
{{ msg }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: "更上一層樓",
};
},
};
</script>
<style>
.parent {
display: flex;
align-items: center;
width: 200px;
}
.child {
flex: 1;
}
</style>
粘貼到自己的自己的.vue文件中會發(fā)現(xiàn)，不管什么時(shí)候，都會提示title。
2、使用自定義指令
現(xiàn)在我們實(shí)現(xiàn)一個(gè)自定義指令，實(shí)現(xiàn)單行溢出省略號和title提示的功能。
directives: {
ellipsis: {
inserted: function (el, binding) {
// 設(shè)置超出隱藏
el.style.overflow = "hidden";
el.style.textOverflow = "ellipsis";
el.style.whiteSpace = "nowrap";
// 鼠標(biāo)移入提示title
if (el.clientWidth < el.scrollWidth) {
el.title = el.innerHTML;
}
},
},
},
使用方式：
<div class="child" v-ellipsis>
{{ msg }}
</div>
此時(shí)，如果文本不超出一行，是不會有title提示的。
如果超過一行，就會有...和title提示，比如我們把詩寫全了。
msg: "白日依山盡，黃河入海流。欲窮千里目，更上一層樓",
是不是發(fā)現(xiàn)，一個(gè)v-ellipsis就可以實(shí)現(xiàn)省略號和超出一行title提示的功能，粘貼可用。
以上就是vue單行文本溢出會出現(xiàn)title提示自定義指令的詳細(xì)內(nèi)容，更多關(guān)于vue文本溢出title提示指令的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本篇文章主要介紹了在vue中獲取dom元素內(nèi)容的方法，可以通過給標(biāo)簽加ref屬性，這里整理了詳細(xì)的代碼,有興趣的可以了解一下2017-07-07
Vue子組件調(diào)用父組件事件的3種方法實(shí)例
大家在做vue開發(fā)過程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue路由跳轉(zhuǎn)傳參數(shù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在頁面中經(jīng)常會遇到自定義文本,如果文本過長就需要換行,在HTML中可以通過標(biāo)簽換行,也可以通過\n轉(zhuǎn)椅字符換行,下面這篇文章主要給大家介紹了關(guān)于vue文本識別“\n”換行問題的解決方式,需要的朋友可以參考下2022-11-11
VsCode工具開發(fā)vue項(xiàng)目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項(xiàng)目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue 命名視圖的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉(zhuǎn)路由,路由組件會渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07