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