vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式詳解
更新時(shí)間：2024年04月08日 08:45:47 作者：迷途小羔羊
在?B?端業(yè)務(wù)中,我們經(jīng)常會(huì)遇到文本內(nèi)容超出容器區(qū)域需顯示省略號(hào)的需求,當(dāng)鼠標(biāo)移入文本時(shí),會(huì)出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場(chǎng)景,接下來(lái)給大家介紹vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式,需要的朋友可以參考下
前言
在 B 端業(yè)務(wù)中，我們經(jīng)常會(huì)遇到文本內(nèi)容超出容器區(qū)域需顯示省略號(hào)的需求。當(dāng)鼠標(biāo)移入文本時(shí)，會(huì)出現(xiàn) Tooltip 顯示完整內(nèi)容。最近，我也遇到了這樣的場(chǎng)景。為了提高業(yè)務(wù)通用性，我已將其封裝為組件、Hook 和指令等形式供使用。
使用方式
npm install vue-ellipsis-tooltip --save
技術(shù)細(xì)節(jié)
如何判斷文本超出了父容器
- 首先創(chuàng)建一個(gè)空白的
div，將當(dāng)前父元素的樣式全部復(fù)制到這個(gè) div 上。將全部文字填充到空白 div 中，獲取當(dāng)前全部文案的高度。然后使用定位和層級(jí)使其在當(dāng)前屏幕上不可見(jiàn)。 - 通過(guò)
二分法，遞歸地找出期望目標(biāo)元素的行數(shù)的高度（lineHeight * rows）所能容納的最大字符串?dāng)?shù)量。
基礎(chǔ)的偽代碼如下：
export const getEllipsisText = (parentNode: HTMLElement, fullText: string, maxHeight: number) => {
const ellipsisContainer = createMeasureContainer(parentNode)
ellipsisContainer.innerHTML = ""
const textNode = document.createTextNode(fullText)
ellipsisContainer.appendChild(textNode)
// 檢查當(dāng)前文本是否滿足高度條件
function inRange() {
return ellipsisContainer.offsetHeight <= maxHeight
}
if (inRange()) {
return {
ellipsis: false,
text: fullText
}
}
// 尋找最多的文字
function measureText(startLoc = 0, endLoc = fullText.length, lastSuccessLoc = 0) {
if (startLoc > endLoc) {
// 找到滿足條件的最長(zhǎng)文本，清理并返回結(jié)果
const finalText = fullText.slice(0, lastSuccessLoc) + "..."
return {
ellipsis: true,
text: finalText
}
// return finalText
}
const midLoc = Math.floor((startLoc + endLoc) / 2)
textNode.textContent = fullText.slice(0, midLoc) + "..."
if (inRange()) {
return measureText(midLoc + 1, endLoc, midLoc)
} else {
return measureText(startLoc, midLoc - 1, lastSuccessLoc)
}
}
return measureText()
}
- 時(shí)間復(fù)雜度主要取決于
measureText函數(shù)，它使用二分查找法來(lái)確定滿足條件的最長(zhǎng)文本。二分查找的時(shí)間復(fù)雜度是 O(log n)，其中 n 是字符串fullText的長(zhǎng)度。在這個(gè)過(guò)程中，每一步都會(huì)將搜索范圍減半，直到找到最合適的文本長(zhǎng)度。 - 空間復(fù)雜度由于
measureText使用了遞歸調(diào)用，空間復(fù)雜度受到遞歸深度的影響。在最壞的情況下，遞歸深度與二分查找的步驟數(shù)相同，即 O(log n)
創(chuàng)建ToolTip彈窗
ToolTip主要是通過(guò)@popperjs/core進(jìn)行實(shí)現(xiàn)
怎么使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css" rel="external nofollow" >
<style>
.wrapper{
margin: 0 auto;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.cjs.prod.min.js"></script>
<script src="./vEllipsis.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper" :style="{ width: '200px' }">
<span v-ellipsis="{ rows: 1, text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaazzzzzzzzzz' }" />
</div>
<div class="wrapper" :style="{ width: `200px` }">
<vue-ellipsis-tooltip :rows="3" text=" A design is a plan or specification for the" />
</div>
</div>
<script>
const App = {
data() {
return {
message: "Hello Element Plus",
};
},
};
const app = Vue.createApp(App);
app.use(vEllipsis);
app.mount("#app");
</script>
</body>
</html>
組件形式
<template>
<div class="wrapper" :style="{ width: `${width}px` }">
<vue-ellipsis-tooltip
:rows="options.rows"
:text="options.text"
:poperOptions="{
effect: 'light'
}"/>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import {vue-ellipsis-tooltip} from "vue-ellipsis-tooltip"
const options = ref({
rows: 1,
text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})
const width = ref(200)
</script>
指令形式
<template>
<div class="wrapper" :style="{ width: `${width}px` }">
<span ref="targetRef" v-ellipsis="{ rows: options.rows, text: options.text }" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const options = ref({
rows: 1,
text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})
const width = ref(200)
</script>
hook形式
<template>
<div class="wrapper" :style="{ width: `${width}px` }" ref="wrapperRef">
<span ref="targetRef" />
</div>
</template>
<script setup lang="ts">
import { useEllipsis } from "vue-ellipsis-tooltip"
import { ref } from "vue"
const targetRef = ref()
const width = ref(200)
const options = ref({
rows: 1,
text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})
useEllipsis(targetRef, options.value, {
effect: "dark"
})
</script>
在vite中使用
main.ts
import { createApp } from 'vue'
import "vue-ellipsis-tooltip/dist/style.css"
import vEllipsis from "vue-ellipsis-tooltip"
import App from './App.vue'
const app = createApp(App)
app.use(vEllipsis)
app.mount('#app')
Attributes
| 名稱 | 說(shuō)明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| rows | 顯示省略的行數(shù) | number | 1 |
| showTooltip | 配置省略時(shí)的彈出框 | boolean | false |
| text | 顯示的內(nèi)容 | string | '' |
| disabled | 是否禁用 | boolean | false |
poperOptions（彈出窗屬性）
| 名稱 | 說(shuō)明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| effect | 主題 | dark / light | dark |
| teleported | 是否插入body | boolean | false |
| showArrow | 是否顯示箭頭 | boolean | true |
| popperClass | 彈出窗類名 | string | '' |
| offset | 出現(xiàn)位置的偏移量 | number | 12 |
| showAfter | 在觸發(fā)后多久顯示內(nèi)容，單位毫秒 | number | 0 |
| hideAfter | 延遲關(guān)閉，單位毫秒 | number | 200 |
| placement | Tooltip 組件出現(xiàn)的位置 | enum | 'bottom' |
| zIndex | 彈窗層級(jí) | number | 1024 |
| popperOptions | popper.js 參數(shù) | object | {} |
總結(jié)
該組件提供了一個(gè)靈活且易于集成的方式，以滿足B端業(yè)務(wù)
以上就是vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3文本顯示省略號(hào)和提示框的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue+Element-ui表單resetFields無(wú)法重置問(wèn)題
本文主要介紹了Vue+Element-ui表單resetFields無(wú)法重置問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
本篇文章主要介紹了詳解Nuxt.js Vue服務(wù)端渲染摸索，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
如何理解Vue簡(jiǎn)單狀態(tài)管理之store模式
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應(yīng)用程序的各組件之間經(jīng)常需要進(jìn)行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進(jìn)行通信。這種簡(jiǎn)單的數(shù)據(jù)共享模式就是store模式。2021-05-05
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解Nuxt.js部署及踩過(guò)的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說(shuō)說(shuō)服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Vue父子組件屬性傳遞實(shí)現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫(xiě)法寫(xiě)父子組件之間的屬性傳遞，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例
今天小編就為大家分享一篇vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決
這篇文章主要介紹了Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03