vue單行文本溢出會出現(xiàn)title提示自定義指令
更新時間：2023年01月18日 10:04:00 作者：qb
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
正文
平時開發(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)，不管什么時候，都會提示title。
2、使用自定義指令
現(xiàn)在我們實現(xiàn)一個自定義指令，實現(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>
此時，如果文本不超出一行，是不會有title提示的。
如果超過一行，就會有...和title提示，比如我們把詩寫全了。
msg: "白日依山盡，黃河入海流。欲窮千里目，更上一層樓",
是不是發(fā)現(xiàn)，一個v-ellipsis就可以實現(xiàn)省略號和超出一行title提示的功能，粘貼可用。
以上就是vue單行文本溢出會出現(xiàn)title提示自定義指令的詳細內(nèi)容，更多關(guān)于vue文本溢出title提示指令的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細介紹了如何基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue跳轉(zhuǎn)頁面的幾種常用方法實例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下2024-05-05
vue.js使用v-model實現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)父子組件間的雙向通信,結(jié)合實例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
深入理解Vue響應(yīng)式原理及其實現(xiàn)方式
Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠為開發(fā)者提供高效便捷的開發(fā)體驗的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實現(xiàn)方式，需要詳細了解可以參考下文2023-05-05
element-ui中的select下拉列表設(shè)置默認值方法
今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue數(shù)字金額動態(tài)變化功能實現(xiàn)方法詳解
這篇文章主要介紹了vue實現(xiàn)數(shù)字金額動態(tài)變化效果，數(shù)字動態(tài)變化是我們在前端開發(fā)中經(jīng)常需要做的效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章介紹了VueX安裝及使用基礎(chǔ)教程，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了淺談vue 二級路由嵌套和二級路由高亮問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了如何簡單實現(xiàn)vue驗證碼60秒倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02